使用 javascript 设置内联 CSS 值很容易。如果我想改变宽度并且我有这样的html:
<div style="width: 10px"></div>
我需要做的就是:
document.getElementById('id').style.width = value;
它将更改内联样式表值。通常这不是问题,因为内联样式会覆盖样式表。例子:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId"></div>
使用这个 JavaScript:
document.getElementById('tId').style.width = "30%";
我得到以下信息:
<style>
#tId {
width: 50%;
}
</style>
<div id="tId" style="width: 30%";></div>
这是一个问题,因为我不仅不想更改内联值,如果我在设置宽度之前查找宽度,当我有:
<div id="tId"></div>
返回的值是 Null,所以如果我有 Javascript 需要知道某些东西的宽度来执行某些逻辑(我将宽度增加 1%,而不是特定值),当我期望字符串“50%”时返回 Null “真的不起作用。
所以我的问题是:我的 CSS 样式中的值不是内联的,如何获取这些值?给定 id,如何修改样式而不是内联值?
好吧,听起来您想更改全局 CSS,以便立即有效地更改特定样式的所有元素。我最近从一个人那里学会了如何自己做这件事肖恩·奥尔森教程 http://www.shawnolson.net/a/503/altering-css-class-attributes-with-javascript.html。可以直接参考他的代码here http://www.shawnolson.net/scripts/public_smo_scripts.js.
总结如下:
您可以检索样式表 https://developer.mozilla.org/En/DOM/Stylesheet via document.styleSheets
。这实际上会返回页面中所有样式表的数组,但您可以通过document.styleSheets[styleIndex].href
财产。找到要编辑的样式表后,您需要获取规则数组。这在 IE 中称为“规则”,在大多数其他浏览器中称为“cssRules”。讲述什么的方式CSSRule https://developer.mozilla.org/en/DOM/cssRule#CSSStyleRule你现在是在selectorText
财产。工作代码看起来像这样:
var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FF
var rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; //maybe '#tId'
var value = rule.value; //both selectorText and value are settable.
让我知道这对你来说是如何工作的,如果你发现任何错误,请发表评论。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)