Question

请查看我的小脚本，该脚本检查是否已在元素上定义样式。

HTML：

<div id="la" style="width: 100px;height: 100px;background: #eee;">

</div>

和JS：

 var _str = document.getElementById('la');

 /*A object literal that contains some pretty random set of css definitions */
 var str_elem = {
        'padding' : '40px',
        'width'    : '100px'    
    }


  /*we are using the for loop to check if the properties defined in our obj literal are actually present in the element style definition.*/
  for(var name in str_elem){
    if (_str.style[name] == ' ') {
        console.log('not present' + ' ' + str_elem[name] );
    }
   }

我的问题是if条件及其中的语法。通常当我们想要获得元素样式时，我们使用以下语法：

elementname.style.propertyname

但是，为什么在检查元素是否具有属性时，我们使用以下语法：

elementname.style['padding']

...

为什么这种语法会引发错误：

elementname.style.propertyname

我的脚本运行正常，我的问题是关于JS语法。

编辑:: 来缩小我的难度，让我重新解释一下我的问题：如果在if条件中，我使用以下语法：

_str.style.[name]（请注意样式后面的点），而不是我目前拥有的_str.style[name]，为什么会抛出错误。？

Answer 1

因为您要检查name变量的值是否作为元素中的样式存在。如果您编写_str.style.name，您将检查名为name的样式的定义。括号允许您动态检查属性，或使用连字符检查属性，例如_str.style['my-dashed-property']

顺便说一句，考虑到样式属性不存在，因为它等于空字符串很奇怪。

语法obj.[name]不起作用，因为点运算符用于通过固定键访问属性，因此您需要查找名为[name]且不允许的属性

Answer 2

好的，我看到你的困惑。

在其他所有事情之前，请阅读本文。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_Accessors

在JavaScript中，您可以通过两种方式访问任何变量的属性。

1）obj.propertyName

2）obj ['propertyName']

现在，回答你的问题：

 _str.style.[name] // Error is thrown because it is syntactically wrong to be accessing the object properties like this.

只需console.log您的_str.style并观察它是一个对象。

所以，

_str.style.[name] // Does not make any sense, syntax wise. Hence the SyntaxError.

因为，你试图在for循环内动态访问对象属性，你这样写：

_str.style[name] // Here name is a variable whose value is dynamically set during each iteration of the loop.

样式属性的JS语法

2 个答案: