Js에서 스타일을 얻는 일반적인 방법-JS 튜토리얼-php.cn

JS에서 CSS를 작동하려면 가장 중요한 것은 스타일을 얻는 것입니다. 다음은 참고용으로 JS에서 스타일을 얻는 가장 일반적인 방법에 대한 기사입니다.

Document div{ color:yellow; } This is div 로그인 후 복사 element.style 속성을 사용하여 가져옵니다.

var div = document.getElementsByTagName("div")[0]; console.log(div.style.color); //"" console.log(div.style.backgroundColor); //red 로그인 후 복사 element.style 속성은 태그의 스타일이나 외부 스타일이 아닌 인라인 스타일만 가져올 수 있습니다. 요소 속성을 사용하면 속성을 다시 할당하여 요소 표시를 변경할 수 있습니다.

var div = document.getElementsByTagName("div")[0]; div.style['background-color'] = "green"; console.log(div.style.backgroundColor); //green 로그인 후 복사 2. getCompulatedStyle 및 currentStyle을 통해 스타일 가져오기

getComputeStyle의 사용 환경은 chrome/safari/firefox입니다. IE 9,10,11

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow 로그인 후 복사 currentStyle은 IE에서 완벽하게 지원될 수 있지만, chrome에서는 지원하지 않습니다. 지원하지 않습니다

var div = document.getElementsByTagName("div")[0]; var styleObj = div.currentStyle; console.log(styleObj.backgroundColor); //red console.log(styleObj.color); //yellow 로그인 후 복사 3 ele.style과 getCompulatedStyle 또는 currentStyle

3.1의 차이점은 ele.style은 읽기-쓰기이고, getCompulatedStyle과 currentStyle은 읽기 전용입니다

3.2 ele.style은 CSS 스타일만 가져올 수 있습니다. 인라인 스타일 속성에 설정됩니다. 그리고 getCompulatedStyle 및 currentStyle은 다른 기본값을 얻을 수도 있습니다

3.3 ele.style은 반드시 최종 스타일이 아닌 스타일 속성에서 스타일을 가져오는 반면, 다른 두 개는 요소의 최종 CSS 스타일을 가져옵니다

4. 스타일 호환성 작성 방법 가져오기

//获取非行间样式(style标签里的样式或者link css文件里的样式)，obj是元素，attr是样式名 function getStyle(obj,attr){ //针对IE if(obj.currentStyle){ return obj.currentStyle[attr]; //由于函数传过来的attr是字符串，所以得用[]来取值 }else{ //针对非IE return window.getComputedStyle(obj,false)[attr]; } } function css(obj,attr,value){ if(arguments.length == 2){ return getStyle(obj,attr); }else{ obj.style[attr] = value; } } .window.getComputedStyle(ele[,pseudoElt]); 로그인 후 복사 두 번째 매개 변수가 null이거나 생략되면 ele의 CSSStyleDeclaration 개체를 가져옵니다.

가상 클래스인 경우 해당 의사 클래스의 CSSStyleDeclaration 개체를 가져옵니다.

div{ width:200px; height:200px; background-color:#FC9; font-size:20px; text-align:center; } div:after{ content:"This is after"; display:block; width:100px; height:100px; background-color:#F93; margin:0 auto; line-height:50px; } This is div var btn = document.querySelector('#btn'); btn.onclick = function(){ var div = document.querySelector('#myDiv'); var styleObj = window.getComputedStyle(div,'after'); console.log(styleObj['width']); } 로그인 후 복사

getPropertyValue CSSStyleDeclaration 객체에 지정된 속성값

var div = document.getElementsByTagName("div")[0]; var styleObj = window.getComputedStyle(div,null); console.log(styleObj.getPropertyValue("background-color")); getPropertyValue(propertyName);中的propertyName不能是驼峰式表示 obj.currentStyle['margin-left'] 有效 obj.currentStyle['marginLeft'] 有效 window.getComputedStyle(obj,null)['margin-left'] 有效 window.getComputedStyle(obj,null)['marginLeft'] 有效 window.getComputedStyle(obj,null).getPropertyValue('margin-left') 有效 window.getComputedStyle(obj,null).getPropertyValue('marginLeft') 无效 obj.currentStyle.width 有效 obj.currentStyle.background-color 无效 obj.currentStyle.backgroundColor 有效 window.getComputedStyle(obj,null).width 有效 window.getComputedStyle(obj,null).background-color 无效 window.getComputedStyle(obj,null).backgroundColor 有效 로그인 후 복사 정리하자면 "-"가 붙은 속성은 직접 클릭이 불가능해서 getProperty

Value 메소드 를 사용하여 처리할 수 있지만, [] getPropertyValue 7.defaultView

많은 온라인 데모 코드에서 getComputeStyle은 document.defaultView 개체를 통해 호출됩니다. 대부분의 경우

window 개체 를 통해 직접 호출할 수 있으므로 이는 필요하지 않습니다. 하지만 Firefox3.6에서 서브프레임의 스타일(iframe)에 액세스하기 위해 defaultView를 사용해야 하는 상황이 있습니다. 이 사례를 읽고 나면 이 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 주의하세요. PHP 중국어 웹사이트 기사의 기타 관련 주제!

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

Js에서 스타일을 얻는 일반적인 방법