Element.style.setAttribute() vs. element.attribute = ''

Ответ 1

Оба абсолютно правильны. Можете ли вы привести несколько примеров, которые не работают во втором случае? Знаете ли вы, что имена атрибутов сначала должны быть верблюдными? Например. element.style.marginTop вместо неправильного element.style.margin-top. Дефис - это недопустимый идентификатор в Javascript.

Ответ 2

Единственное изменение, которое я видел, - с холстом. Но, тогда, учитывая элемент, какая разница между

element.width = '100px'
element.style.width = '100px'
element.setAttribute('width','100px')
element.style.setAttribute('width','100px')

Так как я не нашел ответа от эксперта, только по опыту я скажу это.

width - это открытое свойство элемента, как в объекте car.color = 'red'; setAttribute('color','red') - это функция, которая присваивает значение свойству как  в car = {color:'red',setAttribue:function(prop,val){this[prop]=val;}  В качестве функции прототипом будет

function element(){
   this.color='blue' // default
   this.setAttribute = function(prop, val){ this[prop]=val;}
}
car = new element()

car.color = 'red';
or
car.setAttribute('color','red');

Теперь стиль - это особый случай, где можно сказать, как вещи отображаются в трансформированном виде,  а не его оригинал. Стиль не изменит самого свойства, и это эффект  вы видите теперь в холсте, как это было раньше, в изображениях, которые имеют слишком высокое значение ширины

Как это? представьте себе, что у вас есть образ 100x100 пикселей, ярлык  будут иметь настройки в нем для ширины ширины 100x100px (в том же случае с холстом), тогда  по стилю вы изменяете высоту ширины до 200x200px, то же изображение будет расти, чтобы соответствовать  новый размер, будет усилен, но само изображение по-прежнему 100x100

Хорошо, вы можете проверить это, чтобы вы были удобны с объяснением

имеют изображение

<image id='f' src='whateveritis' width=100 height=100>

Видишь? 100x100px

Теперь добавьте стиль

 style='width:200px'

<image id='f' style='width:200px' src='whateveritis' width=100 height=100>

Видишь? теперь он усиливается

Теперь получите его атрибуты

f = document.getElementById('f');

alert(f.width) // you get 200px

alert(f.getAttribute('width')) // you get 100px

Так что помните, что работа с изображениями, холст все, не базовый размер в стилях, а атрибуты

Размер по умолчанию div или любой нуль

то вы можете установить его размер по стилям, но размер фактически останется 0x0px

Но большинство программ времени будут работать на основе значений атрибутов,  а не в значениях стилей.

И есть еще одна мера, но будет вашей домашней работой

Тогда что такое f.scroolWidth и f.scrollHeight, если это то же самое, что и  ширину и высоту (если не прокрутка, конечно).

Один последний момент, чтобы принять во внимание Даже когда я сделал пример с автомобилем, он отличается от элементов поскольку цвет свойства скрыт, но доступен для стилей Это единственное реальное свойство элемента - это тот, который вы пишете прямо в коде тега html или том, который вы установили с помощью setAttribute потому что даже если вы измените

element.width - это стиль, а не сам атрибут

поэтому единственный способ реально изменить его значение будет

element.setAttribute('width', x)

Я сам это прочитал и нашел другой вопрос, который у вас может быть вы можете подумать, я оставил html-тег с 100x100, и именно поэтому я получаю предупреждение с 100 вместо 200

Ну, не это не так.

Вы тоже можете проверить это, не меняйте тег, как есть

команду f.setAttribute('width', '300');

затем

alert(f.width) // you get 200px

alert(f.getAttribute('width')) // you get 300px

в JQuery - то же самое, единственной командой для изменения атрибута является $(). attr

$(). widht и $(). css просто меняет стиль

Наконец

Это важно?

Да, это так, потому что даже если для изображений и холста работать с атрибутом не  стиль, тот, который принимает визуальный эффект, - это стиль, а не атрибут Это значит, вы можете установить размер оригинала 200x200, и это будет 200x200 но если вы измените стиль на 300x300, изображение будет 300 с тех пор, независимо от того, установите ли вы свой атрибут 1000x1000, изображение будет по-прежнему можно увидеть как 300x300 Но, например, для программы холста изображение, над которым он работает, имеет размер 1000x1000.