네이티브 JS는 HTML 스타일을 가져와서 수정합니다.-HTML 튜토리얼-php.cn

네이티브 JS는 HTML 스타일을 가져와서 수정합니다.

高洛峰

풀어 주다： 2017-02-13 15:16:19

원래의

1705명이 탐색했습니다.

JavaScript 기본 작업에서 요소의 스타일을 가져오는 것은 실제 작업에서 상대적으로 일반적인 일이라는 것을 누구나 알고 있습니다. 여기서는 CSS 스타일을 가져오는 방법을 소개하고 싶습니다. 도움이 필요한 분들에게 도움이 되기를 바랍니다. . 운이 좋다면, 누군가가 더 좋은 방법을 발견하면 제안해 주세요! ! !

1. 인라인 요소 스타일 가져오기:

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>js获取外部样式</title></head><body>
    <div id="div" style="width:200px;height:200px;border:3px solid cyan;"></div></body><script>
    //获取行间样式
    var div = document.getElementById(‘div‘);    var width = div.style.width;
    alert(width);//200px</script></html>

로그인 후 복사

JS 코드에서는 요소 너비를 가져오는 목적이 달성되면 알림이 div 요소의 너비를 200px로 표시합니다. , 그러나 이 간단한 방법은 요소의 인라인 요소 스타일을 얻는 데만 적합하고 내부 스타일과 외부 스타일을 얻을 수 없습니다. 프로젝트에서 인라인 요소 작성 솔루션은 모든 사람이 인식하지 못하므로 이 방법은 단지 모두가 이해할 수 있도록.

2. 비인터라인 스타일 요소 얻기:

요소 스타일이 인터라인 스타일이 아닌 경우 위의 방법을 사용하여 요소의 스타일을 얻을 수 없습니다. :

<!DOCTYPE html><html><head>
    <meta charset="UTF-8">
    <title>js获取内部部样式</title>
    <style>
        #div{
            width: 200px;
            height: 200px;
            border:3px solid cyan;
        }
    </style></head><body>
    <div id="div""></div></body><script>
    var div = document.getElementById(‘div‘);    //获取div的width
    var width = window.getComputedStyle(div,null).width;
    alert(width);//200px
    //修改div的width    div.style.cssText=‘width:300px;‘</script></html>

로그인 후 복사

위 코드에서는 window.getCompulatedStyle('Element',null).'Style'이 사용됩니다. 이 메서드의 호환성: Firefox 및 Google IE9는 계산된 스타일을 가져오지만 필요한 것은 무엇입니까? 여기서 주목해야 할 것은 이 메소드로 얻은 값은 읽기 전용 모드이고 수정이 불가능하기 때문에 style.cssText 메소드를 사용하여 속성을 수정하는 것입니다.

3. 호환성:

이전 단락의 무언의 규칙은 모든 좋은 것은 보편적으로 사용될 수 없다는 것입니다. 예, 짐작하신 대로입니다. 고의적인 IE는 위의 방법을 사용할 수 없지만 IE에는 자체적인 방법이 있습니다. currentStyle이라는 메소드를 사용하므로 자세히 설명하지 않겠습니다. 처리된 호환 코드는 다음과 같습니다.

var div = document.getElementById(‘div‘);if (div.currentStyle) {
    console.log(div.currentStyle.width);
}else{
　　console.log(getComputedStyle(div,null).width);
}

方法封装:
function getStyle(obj,name){    if (obj.currentStyle) {        return obj.currentStyle[name];
    }else{        return getComputedStyle(obj,false)[name];
    }
}

로그인 후 복사

Native JS는 HTML 스타일을 가져옵니다.

더 많은 네이티브 JS에서 HTML 스타일을 얻어서 수정하고 싶다면 PHP 중국어 홈페이지를 주목해주세요!