JS 벌크 작업 CSS 속성
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style type="text/css">
.day
{
background-color:White;
}
.night
{
background-color:Black
}
</style>
<script language="javascript" type="text/javascript">
function operStyle() {
var divObj = document.getElementById("divContent");
var btnObj = document.getElementById("btnCommit");
if (divObj.className == "day") {
divObj.className = "night";
btnObj.value = " ";
} else {
divObj.className = "day";
btnObj.value = " ";
}
}
// div ，
// 1：
function methodOne() {
var divObj = document.getElementById("divTest");
divObj.style.backgroundColor = "blue";
divObj.style.border = "solid 1px red";
divObj.style.width = "300px";
divObj.style.height = "200px";
divObj.style.backgroundPosition = "center";
}
// 2：
function methodTwo() {
var divObj = document.getElementById("divTest");
divObj.style.cssText = "background-color:Blue; border:solid 1px red; width:300px; height:200px; background-position:center";
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="divContent" class="day">
<font color="red"> div ， ！</font>
</div>
<input type="button" value=" " id="btnCommit" onclick="operStyle();" />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<hr />
<h1> divTest ， </h1>
<div id="divTest" >
<font color="red"> divTest </font>
</div>
<input type="button" value=" divTest " onclick="methodTwo()" />
</form>
</body>
</html>Google은 css 스타일을 js로 작성할 때 보통 다음과 같은 두 가지 방식을 사용합니다.
일반적인 상황에서 우리는 js로 요소 대상의 스타일을 설정할 때 다음과 같은 형식을 사용합니다: 코드는 다음과 같습니다: var element=document.getElementById(”id”); element.style.width=”20px”; element.style.height=”20px”; element.style.border=”solid 1px red”;
그러나 위의 방법은 단점이 하나 있는데 양식이 많으면 코드가 많다.또한 JS를 통해 대상을 복제하는 양식은 비교적 전형적인 원형을 소각하고 재구성하는 과정이다. 이런 소각과 재구성은 브라우저의 비용을 증가시킬 수 있다.
js에 cssText 방법이 있습니다: 문법은:obj입니다.style.cssText("스타일");위의 코드는 다음과 같이 수정할 수 있습니다: 요소.style.cssText=”width:20px;height:20px;border:solid 1px red;”;
이런 쓰기 방법은 페이지의 여러 번의reflow를 최대한 피하고 페이지의 성능을 향상시킬 수 있다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
다양한 언어의 JSONJSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
