Javascript 可以检测内联样式吗？

Question

我有一段代码应该在单击时切换对象的高度以增长，如果再次单击它会缩小到它的原始高度。 我尝试了两种方法来让它发挥作用。 第二种方法确实有效，而第一种方法不能重复使用。

据我了解，当我在 Javascript 中设置高度时，它有效地将其内联添加到 HTML 的“样式”属性上，因此会否决 CSS 样式表高度设置，并且对象会增长。

但是，第一种方法只有效一次，我不知道为什么。 在方法 1 中，对象在单击时增大，在第二次单击时缩小，然后不再起作用。

第二种方法使用与方法 1 相同的方法在第一次点击时增长，但是，缩小它只是删除添加的样式。 它一遍又一遍地工作，没有问题。

为什么方法 1 不能一遍又一遍地工作，而方法 2 却可以？

方法一

if(document.getElementById("block1").style.height < 500) {
    document.getElementById("block1").style.height = "500px";
}
else {
    document.getElementById("block1").style.height = "200px";
}

方法二

if(document.getElementById("block1").style.height < 500) {
    document.getElementById("block1").style.height = "500px";
}
else {
    document.getElementById("block1").style.height = "";
}

Answer 1

据我了解，当我在 Javascript 中设置高度时，它有效地将其内联添加到 HTML 的“样式”属性上，因此会否决 CSS 样式表高度设置，并且对象会增长。

不必要。 确实，使用 JS 设置样式的常用方法是使用style 。 但是还有其他方法，例如创建新的样式表。

内联样式并不总是覆盖样式表中的样式。 例如，样式表中的!important样式会覆盖非!important内联样式。

因此，在大多数情况下，最好使用getComputedStyle来获取计算样式而不是内联样式。

但在这种情况下，有一种更直接的方法：使用clientHeight或offsetHeight 。

那些返回元素高度的像素数。 由于它是一个数字，而不是一个字符串，因此您不必解析它来进行比较。

因此，您可以使用

var el = document.getElementById("block1");
el.style.height = el.clientHeight < 500 ? "500px" : "200px";

注意：如果您想确保您的样式将被应用，您可以将其设置为重要。 看看如何。

Answer 2

将字符串与数字进行比较时，JavaScript 会将字符串转换为数字，如果无法转换则转换为NaN 。

假设document.getElementById("block1").style.height是 "200px"。

如果不使用parseInt等函数，就无法将“200px”转换为数字。 因此，在这个比较中它变成了NaN ：

if(document.getElementById("block1").style.height < 500) {

NaN与任何东西（包括它自己！）相比都是假的。

因此，当样式已分配高度时， else始终在方法 1 中运行：

if(document.getElementById("block1").style.height < 500) {
  document.getElementById("block1").style.height = "500px";
}
else {
  document.getElementById("block1").style.height = "200px";
}

这就是方法 1只工作一次的原因。

另一方面，方法 2始终有效，因为空字符串""可以转换为数字 - 数字 0。

所以它第一次运行时，比较NaN < 500 (false)，第二次比较 0 < 500 (true)。

解决方案（正如其他人指出的那样）是比较元素的offsetHeight而不是style.height 。

Answer 3

style.height返回一个字符串值，但您将它与一个整数进行比较。 基本上你的比较是这样的：

if("200px" < 500)

比较数字和字符串时，字符串会转换为数字，而Number("200px")是NaN ，因此您的比较实际上是这样的：

if(Nan < 500)

返回false 。

您的比较第一次起作用的原因是因为style.height最初返回一个空字符串，因为您还没有设置元素的高度。 在这种情况下''被转换为0 ，所以你要检查0是否小于500 ，它是。

如果您想将例如"200px"与整数进行比较，您可以先使用parseInt将其转换为整数：

if(parseInt(document.getElementById("block1").style.height, 10) < 500)

Answer 4

也许你有你的理由，但这种方法闻起来很奇怪。 您是否考虑过通过添加/删除 CSS 类来切换高度？ 这样你就不需要处理这个了。 （而且它也感觉像是更“正确”的方法。）

为什么我认为你在做什么是错误的：

• 您有点将“isShrinked”标志隐藏到样式属性中，
• 您通过删除“px”将尺寸值转换为数字，就好像您可以保证没有其他扩展名/脚本会将其更改为具有不同单位的尺寸，
• 你完全忽略了 CSS 类的概念（这个场景几乎是 CSS 类用法的书本示例）

我坚信您应该在该元素上添加/删除 className。

Answer 5

HTML/CSS

<span id="test1" style="color: #777;">test</span>

JavaScript

console.log(document.getElementById('test1').style.backgroundColor);
//""

console.log(document.getElementById('test1').style['background-color']);
//""

console.log(document.getElementById('test1').style.color);
//"rgb(119, 119, 119)"

console.log(document.getElementById('test1').style['color']);
//"rgb(119, 119, 119)"

注意十六进制值被错误地返回为 RGB 值。