스타일, 현재 스타일, getComputedStyle의 차이점에 대한 소개
시트를 스타일링하는 세 가지 방법이 있습니다
인라인 스타일 : 태그로 작성되었습니다. 인라인 스타일은 모든 태그에만 유효합니다.
내부 스타일 시트 : HTML로 작성되었으며 내부 스타일은 웹 페이지에만 유효합니다.
외부 스타일 시트 : 많은 웹 페이지가 동일한 스타일을 사용해야하는 경우 .CSS가있는 CSS 파일에 스타일을 작성한 다음 각 웹 페이지에서 이러한 스타일을 사용해야하는 CSS 파일을 참조하십시오. 가장 일반적으로 사용되는 스타일 속성은입니다. JavaScript에서 XXX의 값은 document.getElementByid (id) .style.xxxx를 통해 얻을 수 있습니다. 그러나 예기치 않게, 이것은 임베디드 메소드, 즉 스타일 속성에서 설정된 값을 통해 설정된 스타일 값 만 얻을 수 있습니다.
솔루션 : 스타일 속성으로 지정 될 수있는 현재 스타일, runtimestyle, getComputedStyle 스타일 표준 스타일을 소개하십시오!
runtimestyle 런타임 스타일! 스타일의 속성과 겹치면 스타일의 속성이 덮어 쓸 것입니다!
CurrentStyle은 스타일과 runtimestyle의 조합을 말합니다! 현재 스타일을 통해 인라인 또는 외부를 통해 참조 된 CSS 스타일의 가치를 얻을 수 있습니다 (예 : 전용). 예를 들면 다음과 같습니다. document.getElementById ( "Test"). currentStyle.top
FF와 호환하려면 getComputedStyle이 필요합니다.
참고 : GetComputedStyle은 Firefox에 있으며 현재 스타일은 IE입니다. 예를 들어
<tyle> #mydiv {너비 : 300px;} </style>하지만:
var mydiv = document.getElementById ( 'mydiv'); if (mydiv.currentStyle) {var width = mydiv.currentStyle [ 'width']; Alert ( 'IE :' + width);} else if (window.getComputedStyle) {window.getComputedStyle)} null) [ 'width']; Alert ( 'Firefox :' + width);}또한 FF에서는 다음과 같은 방식으로 얻을 수 있습니다.
document.defaultView.getComputedStyle (myDiv, null) .Width; wind
추가 사항은 다음과 같습니다.
블로그를 읽는 동안 나는이 세 사람의 스타일, CurrentStyle, GetComputedStyle을 보았습니다. 나는 전에 공부할 때 그것을 발견하지 못했지만 지금은 그것을 만났기 때문에 조금 연구했습니다. 나는 몇 가지 문제를 발견했습니다. Tao Yuanming은 공부할 때 많은 이해를 구하지 않았지만 훌륭한 프론트 엔드가되기를 원하는 프론트 엔드 개발자로서 여전히 이해해야한다고 말했지만 여전히 이해해야합니다. 그렇지 않으면 잠을 잘 수 없을 것입니다!
토대를 먼저 놓아 봅시다. 세 가지 형태의 계단식 스타일 시트에 대해 이야기 해 봅시다 (세 가지 유형은 각각의 습관에 따라 다른 이름을 가지고 있음).
하나. 인라인 스타일 : HTML 태그로 스타일 속성으로 설정합니다. 좋다:
1 <p style = "색상 :#f90;"> 이것은 인라인 스타일 </p>입니다
둘. Embed Style : <style> 태그를 통해 <head> 태그를 통해 설정하십시오. 좋다:
<스타일 유형 = "text/css">/*이것은 임베드 스타일*/.stuff {color :#f90} </style>입니다삼. 외부 스타일 : <link> 태그를 통해 설정합니다. 좋다:
<link rel = "Stylesheet"href = "path/style.css"type = "text/css"> ====================================================================================================== .Stuff {색상 :#f90;}세 번째 방법이 권장됩니다.
아래 3 개의 주인공은 현장에 있습니다.
우리를 향해 천천히 걸은 첫 번째 사람은 스타일이었습니다. 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> 제목이없는 문서 </title> <link href = "style. <Style type = "text/css"> #stuff {width : 300px;} </style> <script type = "text/javaScript"> window.onload = function () {var odiv = document.getElementById ( 'stuff'); console.log (odiv.style.width); //alert(odiv.style.width); }; </script> </head> <hod> <div id = "stitse"> </div> </body> </html>외부 링크 스타일 시트 스타일 .CSS :
1 @Charset "UTF-8"; 2 / * CSS 문서 * / 3 #stuff {너비 : 100px;}
결과는 400px입니다.
다음 스타일은 CurrentStyle이며, 이는 강력한 백업 MS를 가지고 있다고합니다. 즉,이 사람은 IE 브라우저에서만 사용할 수 있습니다. 다른 사람들은 좋지 않습니다. Window.currentStyle [ "Attr '] 또는 Window.currentStyle.attr.에서 사용됩니다. 즉, Mozilla Firefox에서는 전달할 수없는 내장 스타일 시트에서 300px의 너비 속성 값을 가져옵니다.
마지막은 getComputedStyle (window.getComputedStyle) [ "attr '] 또는 wind
영화 비평가는 다음과 같이 언급했다.
GetComputedStyle은 CurrentStyle과 동일하지만 FF, Opera, Safari 및 Chrome에 적합합니다.
회의적인 태도로 다시 확인했고 IE7, IE8 및 IE9는 모두보고 된 오류를보고했습니다.
객체는 "getComputedStyle"속성 또는 메소드를 지원하지 않습니다.
브라우저 호환성 문제. 브라우저 호환성 문제는 실제로 프론트 엔드 개발자, 특히 범인 IE6의 두통입니다. 그러나 우리는 두려워하고 멀리 떨어져있을 수는 없지만 대신 움직임을 다루고 군인들은 물과 토양을 막기 위해 온다. 당신은 그것과의 싸움에서 많은 즐거움과 그것을 물리 친 후 성취감을 가질 것입니다! ! !
또 다른 요점 : GetComputedStyle 및 CurrentStyle은 속성 값 만 얻을 수 있지만 속성을 설정할 수는 없습니다. 속성 값을 설정하려면 ob.style.attr을 사용하십시오.
문제가 있으면 조언을 해주세요. 미리 감사드립니다! !