JS控制的style对象

最新推荐文章于 2023-05-10 01:09:09 发布
最新推荐文章于 2023-05-10 01:09:09 发布
阅读量1k 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42910765/article/details/119025550
版权

JS控制的style对象 实际就是内联样式style，这个没错，但是对于 JS控制style对象属性值里增加的!important 三个浏览器却给出了不同的结果：

  • ­IE：JS控制style对象属性值完全覆盖内联style属性值，不支持Element.style.property=“value !important”，将报错:参数无效。

  • FF2+：不完全支持Element.style.property=“value !important” : !important无效，不会报错, 如果内联style属性值无!important，则完全覆盖，有!important 则内联style属性优先级最高，不会受JS控制style的任何影响。

  • Opera9+ ：JS控制style对象属性值完全覆盖内联style属性值，支持Element.style.property=“value !important”。

  • Safari：支持Element.style.property=“value !important” ，如果内联style属性值无!important，则完全覆盖，有!important 则内联style属性优先级最高，不会受JS控制style的任何影响。

1、IE浏览器内核：Trident内核，也是俗称的IE内核；
2、Chrome浏览器内核：统称为Chromium内核或Chrome内核，以前是Webkit内核，现在是Blink内核；
3、Firefox浏览器内核：Gecko内核，俗称Firefox内核； 4、Safari浏览器内核：Webkit内核；
5、Opera浏览器内核：最初是自己的Presto内核，后来是Webkit，现在是Blink内核；
6、360浏览器、猎豹浏览器内核：IE+Chrome双内核；
7、搜狗、遨游、QQ浏览器内核：Trident（兼容模式）+Webkit（高速模式）； 8、百度浏览器、世界之窗内核：IE内核；
9、2345浏览器内核：以前是IE内核，现在也是IE+Chrome双内核；

折桂怀橘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript style 样式属性操作
猿码互联
05-28 419
需要注意的是，使用 style 对象只能访问和修改内联样式属性，无法访问和修改外部样式表中定义的样式属性。如果要操作外部样式表中定义的样式属性，可以使用 getComputedStyle 方法来获取计算后的样式属性值，或者通过修改元素的 className 或 classList 属性来应用不同的样式类。要修改元素的样式属性值，可以使用 style 对象的属性赋值方式。要获取元素的样式属性值，可以使用 style 对象的属性访问方式。要动态修改样式属性，可以使用 style 对象的属性赋值方式。
js 控制 style 大全
程序颜
05-04 590
document.getElementById("div01").style.height; document.getElementById("div01").style.lineHeight;  document.getElementById("div01").style.backgroundColor; CSS语法（不区分大小写）                        J
JS中style属性
weixin_30656145的博客
02-20 310
JS中style属性现在我需要对这个标签赋值，其内容为： 1、需要显示的字为“HELLO WORLD”； 2、span的 background-color : red ，另外还要：border:1px solid #333333;cursor:hand; 我需要在<script></script>内把他们赋值，请问怎么写呢？难道要： document.getElementB...
js 控制 style 大全 各种
小灰灰的部落
10-28 1788
document.getElementById("div01").style.height; document.getElementById("div01").style.lineHeight;  document.getElementById("div01").style.backgroundColor; document.getElementsByName("ZCH_XMZX
javascript动态设置样式style实例分析
10-24
通过修改元素的`style`对象，我们可以直接控制CSS样式。下面我们将详细讨论这个主题，并通过实例来分析其中的易错点和使用技巧。 1. **修改元素样式** - 错误用法：许多人会尝试通过设置`element.class`来更改样式...
js对象关系图 方便dom操作
12-11
JavaScript对象关系图（通常称为JS Object Graph或DOM Tree）是表示网页中元素和它们相互关系的一种可视化工具。在Web开发中，DOM（Document Object Model）是HTML和XML文档的编程接口，它将文档结构转化为一系列...
JavaScript CSS Style属性对照表
09-25
JavaScript 可以通过操作 DOM（文档对象模型）来动态改变元素的 CSS 样式，从而实现交互性。本篇文章将详细讲解如何使用 JavaScript 来更改 CSS 样式属性。 首先，我们要了解 CSS 的基本概念。CSS（层叠样式表）...
js实现DIV的一些简单控制
10-30
JavaScript 提供了多种方式来操作 DIV，例如使用 getElementById() 方法来获取 DIV 对象，然后使用 style 属性来改变其样式。 在我们的示例代码中，我们首先使用 CSS 来定义三个 DIV 的样式，然后使用 JavaScript ...
js中事件对象和事件委托的介绍
01-21
事件委托（就是将事件绑定到父级/爷爷级对象上，通过事件对象的target属性来控制子级对象的改变）： event.target（点击的目标对象） <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF...
原生js实现改变随意改变div属性style的名称和值的结果
01-21
一些简单的例子，用原生js和jQuery实现随意改变div属性，和重置。代码如下： 代码如下: <!DOCTYPE html> <html> <head> <meta charset=”utf-8″/> <title>函数传参，改变Div任意属性的值</title> <style type=”text/css”> body,p{margin:0;padding:0;} body{color:#333;font:12px/1.5 Tahoma;padding-top:10px;} #outer{width:300px;margin:0 auto;} p{margin-bottom:10px;}
js style动态设置table高度
10-25
设置table高度想必大家都会，直接在table标签中设置下不就行了吗？这是静态的，如果要动态设置你会吗？下面的实例将教会大家
js .style javaScript控制css属性
wstm2016的博客
07-31 656
盒子标签和属性对照 CSS语法（不区分大小写） JavaScript语法（区分大小写） border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-botto...
用js控制样式
coding...
10-17 1433
可以这样： var obj = document.getElementById("ddd"); obj.style.border = "1px solid red";
利用js变量实现控制css样式的方法（style v-bind 实现也是这个原理）
qq_35703552的博客
06-24 760
js控制css变量实现
javascript中控制css样式的方法
最新发布
qq_68805187的博客
05-10 1384
javascript中控制css样式的方法？ 1.通过修改元素的style属性 2.通过classList属性 3.通过classList属性和CSS样式表 4.通过className属性
js控制style
kabuchino的博客
08-12 106
&lt;a href="#" onclick="testcss(this);" style="color:red;font-weight:bold;"&gt;哈哈内容 &lt;/a&gt;   function testcss(obja) {     obja.style.color = 'black';     obja.style.fontWeig...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值