如何修改element.style样式
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何修改element.style样式相关的知识，希望对你有一定的参考价值。
其实element.style是一种内联样式，很多情况下是在一些JavaScript代码里写死的，这种方法相当不好。但是有些时候，我们在使用第三方js文件时，会遇到。哪么我们如何去修改它呢，在才源代码中 用!important 语法优先权来实现我们想要的效果。
举个例子：
默认情况下上面的图片透明是绿色，我们找不到element.style该怎么修改呢，这时候就可以在下面CSS样式表里面修改:
如上图，在css样式表里面加入一个opacity: 100 ! important ; ，可以看到的是最上面的opacity：0禁用，就是优先显示opacity：100。
参考技术A 我们在写前面 web样式的时候，会发现有些时候，我们怎么修改 style里面的值，页面上的样式都不会修改，当你用工具查看时，会发现里面会有 element.style的值，这个值还找不到是在哪里出现的，还修改不了。其实element.style是一种内联样式，很多情况下是在一些javascript代码里写死的，这种方法相当不好。但是有些时候，我们在使用第三方js文件时，会遇到。哪么我们如何去修改它呢，其实很简单。看下面这种情况，如果你在源代码，是看不到body后面跟一个style的，使用工具，你会发现它变成了下面这种突然给了一个 style[css] view plain copy
</pre><pre name="code" class="html">这个是我正常的body标签
<body>
下面这个是通过查看元素看到的标签
<body style="overflow:hidde; height: 100%; border: none; margin: 0px; padding: 0px;" >
我使用firebug会看到，原来是这种内联样式。
其实我们可以用!important来修改它
我原来的body标签就是<body>只要加上<body style='overflow:auto ! important;'>
我这里要演示的就是让滚动条显示出来
你再刷新一下，就会发现值变过来了 参考技术B 我们在写前面 web样式的时候，会发现有些时候，我们怎么修改 style里面的值，页面上的样式都不会修改，当你用工具查看时，会发现里面会有 element.style的值，这个值还找不到是在哪里出现的，还修改不了。其实element.style是一种内联样式，很多情况下是在一些JavaScript代码里写死的，这种方法相当不好。但是有些时候，我们在使用第三方js文件时，会遇到。哪么我们如何去修改它呢，其实很简单。看下面这种情况，如果你在源代码，是看不到body后面跟一个style的，使用工具，你会发现它变成了下面这种突然给了一个 style
[css] view plain copy
</pre><pre name="code" class="html">这个是我正常的body标签
<body>
下面这个是通过查看元素看到的标签
<body style="overflow:hidde; height: 100%; border: none; margin: 0px; padding: 0px;" >
我使用firebug会看到，原来是这种内联样式。
其实我们可以用!important来修改它
我原来的body标签就是<body>只要加上<body style='overflow:auto ! important;'>
我这里要演示的就是让滚动条显示出来
你再刷新一下，就会发现值变过来了本回答被提问者采纳 参考技术C 如果html里确实没有写style，
那么基本上就是js弄出来的了，
在内部js和外部js都仔细检查下，看看哪里定义了修改一下就行了，如果实在是不会改js，那么最简单的办法就是把那个p标签换掉(比如换成span)
（望楼主采纳哦）
获取 修改 CSS 样式
内联（style里的）样式
element.style.color
element.style.getPropertyValue("color")
非内联样式
window.getComputedStyle(elem1,null).getPropertyValue("backgroundColor"); (getComputedStyle(elem1,null) 第二个参数null用于获取伪类样式（":after"）)
document.defaultView.getComputedStyle(elem1,null).getPropertyValue("backgroundColor");
(使用defaultView可能一是人们不太乐意在window上专门写个东西，二是让API在Java中也可用)
ie(6-8)下需要使用元素方法实现：
object.currentStyle.backgroundColor ( IE不支持DOM的style对象下的方法 ，例如element.style.removeProperty("color") )
computed style都是只读的
下面这种可以获取<style>标签里面的样式
document.styleSheets[0].cssRules || document.styleSheets[0].rules
添加多条样式到style属性：
element.style.cssText = element.style.cssText + ";" + addcss(需要添加的样式);
（语法 element.style.cssText="width:200px;height:70px;display:bolck"; ）
淘宝：
var styleEl = document.createElement("style");
document.getElementsByTagName("head")[0].appendChild(styleEl);
if (styleEl.styleSheet) {
if (!styleEl.styleSheet.disabled) { //判断样式是否添加到document
styleEl.styleSheet.cssText = cssText;
}
} else {
try {
styleEl.innerHTML = cssText
} catch(e) {
styleEl.innerText = cssText;
}
}
以上是关于如何修改element.style样式的主要内容，如果未能解决你的问题，请参考以下文章