Введение в разницу между стилем, CurrentStyle, GetComputedStyle
Есть три способа стилизовать листы
Встроенный стиль: он написан в теге. Встроенный стиль действителен только для всех тегов.
Внутренний лист стиля: он написан в HTML, а внутренний стиль действителен только для веб -страницы.
Внешний лист стиля: если многие веб -страницы должны использовать одни и те же стили, напишите стили в файле CSS с .CSS в качестве суффикса, а затем ссылайтесь на файл CSS на каждой веб -странице, который должен использовать эти стили. Наиболее часто используемый атрибут стиля. В JavaScript значение XXX может быть получено через Document.getElementByID (id) .Style.xxxx. Однако неожиданно это может получить значение стиля, установленное только встроенными методами, то есть значением, установленным в атрибуте стиля.
Решение: введите стандартный стиль в стиле CurrentStyle, Runtimestyle, GetComputedStyle Style, который может быть указан по атрибуту стиля!
Runtimestyle Runtime Style! Если он перекрывается со свойством стиля, свойство стиля будет перезаписано!
CurrentStyle относится к сочетанию стиля и бегуна! Вы можете получить ценность стиля CSS, на который ссылаются встроенные или внешние через CurrentStyle (т.е. только). Например: document.getElementById ("test"). CurrentStyle.top
Чтобы быть совместимым с FF, вам нужно GetComputEdStyle, чтобы сделать это
Примечание: GetComputEdStyle находится в Firefox, CurrentStyle находится в т.е. Например
<style> #mydiv {width: 300px;} </style>но:
var mydiv = document.getElementbyId ('myDiv'); if (mydiv.currentStyle) {var width = mydiv.currentStyle ['width']; alert ('ie:' + width);} else if (window.getComputEdstyle) {varTh = windotmocomemoCompultyle (mydiv, mydiv, mydiv, mydiv, mydiv, mydiv, windowcomputedstyle) null) ['width']; alert ('firefox:' + width);}Кроме того, под FF вы также можете получить его следующим образом
document.defaultview.getComputeDStyle (myDiv, null) .width; window.getComputeDStyle (mydiv, null) .width;
Вот некоторые дополнения:
Читая блог, я видел этих 3 парней - Style, CurrentStyle, GetComputEdStyle. Я не сталкивался с этим, когда я учился раньше, но теперь я столкнулся с этим, поэтому я немного изучал это. Я обнаружил некоторые проблемы, может быть, это было из -за возраста времени, или это может быть из -за моего невежества, но это действительно запутало меня. Хотя Тао Юанминг сказал, что он не добился особого понимания во время учебы, как фронт-разработчик, который хочет стать превосходным фронтальным концом, ему все еще нужно понять это, иначе он не сможет спать!
Давайте сначала заложили основу. Давайте поговорим о трех формах каскадных листов в стиле (у трех типов разные имена, в соответствии с их соответствующими привычками):
один. Встроенный стиль: установить с атрибутом стиля в тегах HTML. нравиться:
1 <p style = "color:#f90;"> Это встроенный стиль </p>
два. Стиль встраивания: пройдите через тег <Head> через тег <style>. нравиться:
<style type = "text/css">/*Это стиль встроенного*/.stuff {color:#f90} </style>три. Внешний стиль: установить через <Link> тег. нравиться:
<link rel = "styleSheet" href = "path/style.css" type = "text/css"> ======================================================================================== .stuff {color:#f90;}Третий метод рекомендуется.
Три главных героя ниже находятся на поле.
Первым человеком, который медленно шел к нам, был стиль. Он используется в obj.style.attr; Критик кино прокомментировал свой блог:
Стиль может получить только встроенный стиль элемента, а внутренние и внешние стили не могут быть получены с помощью стиля.
Я проверил его следующим кодом, и это действительно, как упомянуто выше. Я использовал три стиля, и результат, который я получил, является ценность встроенного стиля.
<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns = "http://www.w3.org/1999/xhtml"> <head> <meta http-equiv = "content-type" content = "text/html; charset = utf-8"/> <title> unt title incord </title> <link href = "стиль. type = "text/css"/> <style type = "text/css"> #stuff {width: 300px;} </style> <script type = "text/javascript"> window.onload = function () {var Odiv = document.getElementById ('works'); console.log (Odiv.Style.width); //alert(odiv.style.width); }; </script> </head> <body> <div id = "stuff"> </div> </body> </html>Внешняя ссылка стиль style.css:
1 @charset "UTF-8"; 2 / * CSS Document * / 3 #STUFF {ширина: 100px;}
Результат 400px.
Следующим стилем является CurrentStyle, который, как говорят, имеет сильную поддержку MS, что означает, что этот парень может использоваться только в браузере IE. Другие не хороши. Он используется window.currentStyle ["attr '] или window.currentStyle.attr. В т.е. Получите значение атрибута ширины 300px в листе встроенного стиля, который не может быть передан в Mozilla Firefox.
Последний приходит в GetComputedStyle, который использует window.getComputedStyle (ob, pseudoelt) ["attr '] или windo.getcomputedStyle (ob, псевдольт).
Кино -критик прокомментировал:
getComputeDStyle функционирует так же, как и CurrentStyle, но он подходит для FF, Opera, Safari и Chrome.
Со скептическим отношением я снова это проверил, и IE7, IE8 и IE9 все сообщили об ошибках:
Объект не поддерживает атрибут "getComputedStyle" или метод
Проблемы совместимости браузера. Проблема совместимости браузера действительно является головной болью для фронтальных разработчиков, особенно виновника IE6. Но мы не можем бояться и держаться подальше от него, но вместо этого имеем дело с ходами, и солдаты приходят, чтобы заблокировать воду и почву. Вам будет очень весело в борьбе с ним и чувство выполненного долга после победы над этим! ! !
Другой момент: getComputedStyle и CurrentStyle могут получить только значения атрибутов, но не могут установить атрибуты. Если вы хотите установить значение атрибута, используйте ob.style.attr.
Пожалуйста, дайте мне советы, если что -то не так, заранее спасибо! !