Question

我有一段代码可以切换一个对象的高度，以便在点击时增长，如果再次点击它会收缩到它的原始高度。我尝试了两种方法来实现这一点。第二种方法确实有效，而第一种方法不重复。

据我了解，当我在Javascript中设置一个高度时，它会有效地将其添加到＆＃34;样式＆＃34; HTML中的属性，因此取代了CSS样式表高度设置，并且对象也在增长。

然而，第一种方法只能使用一次，我不知道为什么。在方法1中，对象在单击时会增大，在第二次单击时会缩小，然后再也不会起作用。

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

为什么方法1不能一次又一次地工作，而方法2呢？

方法1

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

方法2

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

Answer 1

据我了解，当我在Javascript中设置高度时，它是有效的将它添加到＆＃34; style＆＃34; HTML中的属性，以及类似的否决 CSS样式表高度设置，对象增长。

不一定。使用style设置样式的常用方法确实如此。但还有其他方法，例如创建新的样式表。

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

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

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

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

因此，您可以使用

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

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

Answer 2

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

假设document.getElementById("block1").style.height是＆＃34; 200px＆＃34;。

＆＃34; 200像素＆＃34;如果不使用parseInt等函数，则无法强制转换为数字。因此，在此比较中它变为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＆lt; 500（假），第二次比较0＆lt; 500（真实）。

解决方案（正如其他人指出的那样）是比较元素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类来切换高度？那样你就不需要处理这个了。（它也感觉更像＆＃34;正确＆＃34; aproach。）

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

你有点隐藏＆＃34; isShrinked＆＃34;标记为样式属性，
您正在通过删除＆＃34; px＆＃34;将维值转换为数字。好像你可以保证没有其他扩展/脚本会将它改成具有不同单位的维度，
你完全忽略了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 值。

Javascript可以检测内联样式吗？

5 个答案:

HTML/CSS

JavaScript