В javascript есть какая-то разница между использованием
element.style.setAttribute('width', '150px');
и
element.style.width = '150px';
?
Я видел, что ключевые слова не будут работать с первым способом (например, this), но для атрибутов без ключевого слова есть разница
Оба абсолютно правильны. Можете ли вы привести несколько примеров, которые не работают во втором случае? Знаете ли вы, что имена атрибутов сначала должны быть верблюдными? Например. element.style.marginTop вместо неправильного element.style.margin-top. Дефис - это недопустимый идентификатор в Javascript.
Единственное изменение, которое я видел, - с холстом. Но, тогда, учитывая элемент, какая разница между
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.