使用Java脚本更改CSS值
使用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,这样就可以有效地一次更改石化样式的所有元素
这是摘要:
您可以通过检索样式表document.styleSheets
。实际上,这将返回页面中所有样式表的数组,但是您可以通过document.styleSheets[styleIndex].href
属性来确定正在使用哪个样式表。找到要编辑的样式表后,需要获取规则数组。这在IE中称为“规则”,在大多数其他浏览器中称为“cssRules”。通过属性可以知道您所使用的CSSRule的方式selectorText
。工作代码如下所示:
var cssRuleCode = document.all ? 'rules' : 'cssRules'; //account for IE and FFvar rule = document.styleSheets[styleIndex][cssRuleCode][ruleIndex];
var selector = rule.selectorText; //maybe '#tId'
var value = rule.value; //both selectorText and value are settable.
让我知道这对您的工作原理,如果发现任何错误,请发表评论。
以上是 使用Java脚本更改CSS值 的全部内容, 来源链接: utcz.com/qa/427083.html