Синтаксис JS на свойство стиля

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]); 
    } 
    } 

Мой вопрос о том, если состояние и синтаксис внутри него. Обычно, когда мы хотим получить стиль элементов мы используем следующий синтаксис:

elementname.style.propertyname 

Но почему при проверке, если элемент имеет свойство, мы, используя следующий синтаксис:

elementname.style['padding'] 

??

И почему этот синтаксис выдает ошибку:

elementname.style.propertyname 

Мой сценарий работает отлично, на мой вопрос о синтаксисе JS.

EDIT :: конденсироваться мое затруднение, позвольте мне перефразировать мой вопрос: если в условии, если что у меня есть я использую следующий синтаксис:

_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.ИмениСвойства

2) OBJ [ 'ИмениСвойства']

Теперь, приходя на ваш вопрос:

_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. 

И так, вы пытаетесь получить доступ к свойствам объекта динамически внутри для цикла, то напишите как это:

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