요소의 스타일 속성 값을 얻는 방법은 무엇입니까?

요소의 특정 스타일 속성 값을 얻으려면 어떻게 해야 합니까? 아래에서 제가 어떻게 했는지 보여드리겠습니다. 도움이 되길 바랍니다. ( box.style.height) ->null

실제 프로젝트에서는 값을 얻기 위해 모든 스타일을 인라인으로 작성할 수 없기 때문에 이 방법은 일반적으로 사용되지 않습니다(html과 css를 분리할 수 없습니다 ).

2. window.getCompulatedStyle

(현재 작업의 요소 개체, 현재 요소의 의사 클래스[일반적으로 의사 클래스에는 null을 쓰지 않음])을 사용합니다. 브라우저에 의해 계산된 스타일

브라우저에 의해 계산된 모든 스타일: 현재 요소 태그가 페이지에서 렌더링될 수 있는 한 모든 스타일은 브라우저에 의해 계산(렌더링)됩니다. 일부 스타일은 작성되지 않았지만

얻을 수 있는 결과는 CSSStyleDeclaration 클래스의 인스턴스입니다. 여기에는 현재 요소의 모든 스타일 속성과 값이 포함됩니다

console.log( window.getCompulatedStyle);//function

console.log(window.getCompulatedStyle(box,null))["height"]

3. 사용, IE6-8에서는 호환되지 않습니다. 창 아래에 getCompulatedStyle 속성이 없기 때문에 -> 오류가 보고됩니다

IE6-8에서는 currentStyle을 사용하여 브라우저에서 계산된 모든 스타일을 얻을 수 있습니다

　 console.log(box.currentStyle)

Console.log(box.currentStyle.height)

스타일의 호환 가능한 쓰기 방법을 가져옵니다. getCss: [ attr] 브라우저에 의해 계산된 현재 요소의 모든 스타일에서

/*curEle:[object] 当前要操作的元素对象 
            attr:[string] 我们要获取的样式属性的名称
            1、使用try、catch来处理兼容（只有在不得已的情况下）
               前提:必须保证try中的代码在不兼容的时候报错，这样才可以catch捕获到错误信息,进行其他的处理
               不管当前的浏览器是否支持这个方法，都需要把try中的代码执行一遍，如果当前是IE7，window.getComputedStyle不兼容，但是也需要执行一遍再执行catch里面的代码，执行了两遍，消耗性能，
            2、判断当前浏览器中是否存在这个属性或者方法，存在就兼容，不存在就不兼容
            3、通过检测浏览器版本和类型来处理兼容 window.navigator.userAgent
            获取当前浏览器是IE6-8            */function getCss(curEle,attr){var val = null;//方法2if("window.getComputedStyle" in window){//或者window.getComputedStylevar = window.getComputedStyle(curEle,null)[attr];
            }else{var = curEle.currentStyle[attr];
            }//方法1try{var = window.getComputedStyle(curEle,null)[attr];
            }catch(e){var = curEle.currentStyle[attr];
            }//方法3if(/MSIE (6|7|8)/.test(navigator.userAgent)){var = curEle.currentStyle[attr];
            }else{var = window.getComputedStyle(curEle,null)[attr];
            }return val;        
        }

console.log(getCss(box,"border"))
        console.log(getCss(box,"fontFamily"))

표준 브라우저와 IE 브라우저는 여전히 다른 결과를 얻습니다. -> 일부 스타일 속성의 경우, 주로 브라우저마다 다른 결과를 얻습니다. getCompulatedStyle과 currentStyle은 특정 측면에서 다르기 때문입니다

복합 스타일 값을 분해하여

console.log(getCss(box, "marginTop"))

The를 얻기 위해 분해할 수 있습니다. 위의 getCss가 아직 완료되지 않았으므로 아래로 진행하세요. 첫 번째 업그레이드: 얻은 스타일 값에서 "unit"을 제거합니다. (parseFloat는 "number +unit/number"와 일치하는 경우에만 사용할 수 있습니다.)

function getCss(curEle,attr){var val = null;var reg = null;if(/MSIE (6|7|8)/.test(navigator.userAgent)){var = curEle.currentStyle[attr];
            }else{var = window.getComputedStyle(curEle,null)[attr];
            }
            reg = /^(-?\d+(\.\d+)?)(px|pt|rem|em)?$/i;return reg.test(val)?parseFloat(val):val; //这样写肯定不行，对于某些样式属性的值是不能去单位的，例如：float position  margin  padding  border    这些复合值 background    }

두 번째 업그레이드: 일부 스타일 속성이 다르기 때문에 브라우저에서 호환되지 않습니다. 예를 들어 opacity

function getCss(curEle,attr){var val = null;var reg = null;if(/MSIE (6|7|8)/.test(navigator.userAgent)){if(attr==="opacity"){
                    val = curEle.currentStyle["filter"];//把获取到的结果剖析，获取里面的数字，让数字除以100才和标准浏览器保持一致reg = /^alpha\(opacity=(\d+(?:\.\d+)?)\)$/i;
                    val = reg.test(val)?reg.exec(val)[1]/100:1}else{
                    val = curEle.currentStyle[attr];
                }                
            }else{//如果传递进来的结果是opacity，说明我想获得的是透明度，但是在IE6-8下获取透明度需要使用filterval = window.getComputedStyle(curEle,null)[attr];
            }}

는 작은 지식 포인트를 추가합니다. pseudo-class

:before :after가 생성됩니다. 요소 노트 앞이나 뒤에 새로운 가상 라벨, 이 가상 라벨에 스타일을 추가하거나 내용 등을 추가할 수 있습니다. 또한 의사 클래스를 통해 부동소수점을 지울 수도 있습니다. window.getCompulatedStyle(box, " 이전").content

위 내용은 요소의 스타일 속성 값을 얻는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!