네이티브 JS는 HTML 스타일을 가져와서 수정합니다.
- 高洛峰원래의
- 2017-02-13 15:16:191667검색
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 중국어 홈페이지를 주목해주세요!