이 글에서는 인라인 스타일과 임베디드 스타일을 얻는 javascript 예제를 주로 소개합니다. 관심 있는 친구들은
스타일 속성을 통해 배경 패턴 설정
<!--html--> <p id="change"> change color </p>
/*css*/ #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; }
//js change.style.backgroundColor="purple";
을 참조하세요.
색상 선택기 설정 사이드 바에서 변경 배경색을 선택한 색상으로 설정합니다. 이때 색상 선택기의 색상은 인라인 스타일을 사용하여 추가됩니다.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css</title> <style> * { margin: 0; padding: 0; } .wrap { width: 220px; height: 200px; position: absolute; top: 300px; left: -172px; } .open-close { height: 45px; width: 48px; background: url("open-close.png") no-repeat; background-size: contain; border: 1px solid grey; border-left: none; position: absolute; top: 0; right: 0; z-index: 2; } .changer { height: 150px; width: 170px; position: absolute; top: 0; left: 0; border: 1px solid grey; text-align: center; padding-top: 8px; } .list > li { display: block; width: 36px; height: 36px; float: left; margin-left: 9%; margin-top: 10%; } #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; } </style> </head> <body> <p class="wrap" id="wrap"> <!--html--> <p class="open-close" id="open"></p> <p class="changer"> <span>颜色选择器</span> <ul class="list"> <li class="color-orange" style="background-color: orange"></li> <li class="color-red" style="background-color: red"></li> <li class="color-blue" style="background-color: blue"></li> <li class="color-black" style="background-color: black"></li> <li class="color-green" style="background-color: green"></li> <li class="color-pink" style="background-color: pink"></li> </ul> </p> </p> <p id="change"> change color </p> <script> var open = document.getElementById("open"); var wrap = document.getElementById("wrap"); var list = document.getElementById("list"); var change = document.getElementById("change"); var color_change = document.getElementsByTagName("li"); change.style.backgroundColor = "purple"; open.onmouseover = function () { wrap.style.left = 0 + "px"; }; open.onclick = function () { wrap.style.left = -172 + "px"; }; for (var i = 0; i < color_change.length; i++) { color_change[i].id = i; color_change[i].onclick = function () { change.style.backgroundColor = color_change[this.id].style.backgroundColor; } } </script> </body> </html>
문제:
색상 선택기의 색상이 삽입 또는 외부 소개를 사용하여 추가되면 자바스크립트의 스타일 속성이 유효하지 않으며 색상 값을 얻을 수 없습니다.
해결책:
javascript의 스타일 속성은 인라인 스타일만 얻을 수 있습니다. 외부에서 도입된 스타일과 내장된 스타일의 경우 currentStyle 속성을 사용해야 합니다. 그러나 currentStyle은 Firefox 및 Chrome에서 지원되지 않으므로 다음 호환성 코드를 사용해야 합니다:
HTMLElement.prototype.defineGetter("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); });
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } .wrap { width: 220px; height: 200px; position: absolute; top: 300px; left: -172px; } .open-close { height: 45px; width: 48px; background: url("open-close.png") no-repeat; background-size: contain; border: 1px solid grey; border-left: none; position: absolute; top: 0; right: 0; z-index: 2; } .changer { height: 150px; width: 170px; position: absolute; top: 0; left: 0; border: 1px solid grey; text-align: center; padding-top: 8px; } .list > li { display: block; width: 36px; height: 36px; float: left; margin-left: 9%; margin-top: 10%; } .color-orange { background-color: orange; } .color-red { background-color: red; } .color-blue { background-color: blue; } .color-blank { background-color: black; } .color-green { background-color: green; } .color-pink { background-color: pink; } #change { border: 1px solid black; width: 200px; height: 200px; text-align: center; line-height: 200px; } </style> </head> <body> <p class="wrap" id="wrap"> <!--html--> <p class="open-close" id="open"></p> <p class="changer"> <span>颜色的选择</span> <ul class="list"> <li class="color-orange"></li> <li class="color-red"></li> <li class="color-blue"></li> <li class="color-blank"></li> <li class="color-green"></li> <li class="color-pink"></li> </ul> </p> </p> <p id="change"> change color </p> <script> HTMLElement.prototype.defineGetter("currentStyle", function () { return this.ownerDocument.defaultView.getComputedStyle(this, null); }); var open = document.getElementById("open"); var wrap = document.getElementById("wrap"); var list = document.getElementById("list"); var change = document.getElementById("change"); var color_change = document.getElementsByTagName("li"); change.style.backgroundColor="purple"; open.onmouseover = function () { wrap.style.left = 0 + "px"; }; open.onclick = function () { wrap.style.left = -172 + "px"; }; for (var i = 0; i < color_change.length; i++) { color_change[i].id = i; color_change[i].onclick = function () { change.style.backgroundColor = color_change[this.id].currentStyle.backgroundColor; } } </script> </body> </html>
위 내용은 javascript가 인라인 스타일과 내장 스타일을 얻는 방법에 대한 예제 코드 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!