使用Java脚本更改CSS值

一尘不染

使用Java脚本更改CSS值

javascript

使用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，如何修改样式而不是内联值？

阅读 699

2020-04-25

共1个答案

一尘不染

好的，这听起来像您想更改全局CSS，这样就可以有效地一次更改石化样式的所有元素

这是摘要：

您可以通过检索样式表document.styleSheets。实际上，这将返回页面中所有样式表的数组，但是您可以通过document.styleSheets[styleIndex].href属性来确定正在使用哪个样式表。找到要编辑的样式表后，需要获取规则数组。这在IE中称为“规则”，在大多数其他浏览器中称为“cssRules”。通过属性可以知道您所使用的CSSRule的方式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.

让我知道这对您的工作原理，如果发现任何错误，请发表评论。

2020-04-25