CSS가 ID와 클래스를 사용하여 요소 스타일을 제어하는 ​​방법에 대한 분석 예

이제 다음과 같은 예시 요구 사항이 있습니다.

1) 빨간색, 보라색, 주황색, 녹색 및 파란색 글꼴 색상으로 표시된 5개의 상자를 그립니다.

2) 상자 중 하나를 마우스로 클릭하면 테두리가 표시됩니다. 굵게 표시되고 상자 글꼴의 색상은 색상과 일치합니다.

효과는 아래와 같습니다.

(그림 1) 상자 렌더링

아래는 구체적인 구현 아이디어입니다.

5개 상자의 내용, 코드는 다음과 같습니다. 🎜

<ul id=&#39;levelGroup&#39;>

    <li id=&#39;level1&#39; >红</li>
    <li id=&#39;level2&#39; >紫</li>
    <li id=&#39;level3&#39; >橙</li>
    <li id=&#39;level4&#39; >绿</li>
    <li id=&#39;level5&#39; >蓝</li>

 </ul>

🎜 🎜 2. 독창적인 스타일 구현 🎜🎜🎜 위 요구사항의 스타일 요구사항을 CSS를 사용하여 표현합니다. 1, CSS 코드는 다음과 같습니다. : 🎜

body{
  
  font-size: 10px;

}

#levelGroup{

	list-style: none;
	border: 1px solid gray;
	height: 40px;
	width: 200px;
	overflow: hidden;
	padding: 10px;

}

#level1{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: red;
	margin-right: 5px;
	text-align: center;
	padding-top: 5px;
}


#level2{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: purple;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}

#level3{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: orange;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
#level4{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: green;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}
#level5{

	border: 1px solid gray;
	width: 20px;
	height: 20px;
	float: left;
	color: blue;
    margin-right: 5px;
	text-align: center;
	padding-top: 5px;

}

🎜 이 시점에서 그림 1의 효과가 완성될 수 있습니다. 🎜🎜🎜 3. 인터랙티브 스타일 구현 🎜🎜🎜 다음으로 요구사항 2를 분석한 결과, 각 li 요소를 클릭하면 와이어프레임을 굵게 만들고 색상이 변경되는 스타일을 해당 요소에 부여하여 구현할 수 있음을 발견했습니다. 그러면 스타일을 추가하는 방법은 무엇입니까? 일반적으로 우리의 접근 방식은 각 li에 클래스 속성을 추가하고 클래스의 CSS 스타일(테두리 굵게, 색상 변경)을 설정하는 것입니다. 구체적인 CSS 코드는 다음과 같습니다. 🎜

.level1_selected{

  border: 2px solid red !important;

}

.level2_selected{

	border: 2px solid purple !important;
}
.level3_selected{

	border: 2px solid orange !important;
}
.level4_selected{

	border: 2px solid green !important;
}
.level5_selected{

	border: 2px solid blue !important;
}

🎜 다음으로 JS 컨트롤 인터랙티브 스타일의 코드는 다음과 같습니다. 🎜

$("#levelGroup li").click(function()
   
      //首先获取该元素的索引
      var index = $(this).index();


      //接着为该li添加相应的css交互样式
       var para_index = index+1;
       $(this).addClass("level"+para_index+"_selected");


     //同时也要将其他li元素的样式还原为初始状态
     $("#levelGroup li").each(function(){
        var curIndex = $(this).index();
        if(curIndex !=index){
             
             curIndex = curIndex+1;
             $(this).removeClass("level"+curIndex+"_selected");


       }

    });

});

e 🎜 최종 구현 효과는 그림 2에 나와 있습니다. 🎜🎜🎜🎜🎜 그림 (2) 인터랙션 렌더링 인터랙션 렌더링 B🎜🎜 🎜 4. 코드 최적화 🎜🎜🎜 문제 :🎜위 코드의 구현을 관찰하면 독자는 문제를 빨리 발견할 수 있습니다. 🎜js의 코드는 작동하기 번거롭고 탐색해야 하며 전반적인 효율성이 낮습니다🎜. 🎜🎜 🎜분석: 🎜그렇다면 어떻게 개선하고 최적화할 수 있을까요? 분석을 통해 js의 코드가 복잡한 이유는 각 li 요소의 요구사항 1의 원래 스타일이 #level1{......}과 같이 id에 의해 제어되는 반면, 요구 사항 2는 .level1_selected{......}와 같은 클래스 속성에 의해 제어되며 각 li 요소의 원래 스타일과 대화형 스타일이 다르기 때문에 상호 작용 중에 스타일을 변경하려면 인덱스 위치 지정 및 순회를 수행해야 합니다. . 🎜🎜 🎜해결책: 🎜CSS 스타일 설정 방법에 문제가 있으므로 변경 사항을 디자인하는 방법은 무엇입니까? 🎜사실 여기서는 다음 개념을 따를 수 있습니다. 후속 js 작업을 줄이기 위해 가능한 적은 수의 새 컨트롤 클래스를 추가합니다. 🎜예를 들어 위의 방법은 요구사항 2에 대한 솔루션의 각 li에 "선택된 클래스"를 추가하는 것입니다(예: class level1_selected, class level2_selected...). 여기서 이상적인 솔루션은 선택한 클래스 하나만 추가하는 것입니다. 그러나 선택한 클래스는 각 li의 ID와 함께 사용되어 선택한 각 클래스가 서로 다른 스타일을 갖도록 해야 합니다. 어쩌면 어떤 수련생은 여기에서 잘 이해하지 못할 수도 있습니다. 괜찮습니다! 아래 코드를 살펴보세요. 🎜🎜 요구사항 2의 상호작용 재설계(선택됨) 🎜

#level1.selected{

	border: 2px solid red;

}

#level2.selected{

	border: 2px solid purple;
}
#level3.selected{

	border: 2px solid orange;
}
#level4.selected{

	border: 2px solid green;
}
#level5.selected{

	border: 2px solid blue;
}

🎜 그러면 js의 코드가 어떻게 변경되었는지 살펴볼 수 있습니다. 독자는 내가 변경한 스타일 클래스를 기반으로 js 작업 코드를 직접 작성할 수도 있습니다. 내가 밑에 쓴거랑 똑같지? 🎜

$("#levelGroup li").click(function(){
   
      $(this).addClass("selected").siblings().removeClass("selected");

});

🎜🎜 코드를 읽고 나니 기분이 좋나요? 결국 CSS에서 클래스를 추가하는 방식만 변경하면 후속 JS 코드가 이렇게 간결해질 수 있습니다! 따라서 여기에 도출된 한 가지 결론은 다음과 같습니다(위에서 이미 언급함). 🎜 후속 js 작업을 줄이기 위해 가능한 한 적은 수의 새 컨트롤 클래스를 추가합니다. 🎜🎜🎜

위 내용은 CSS가 ID와 클래스를 사용하여 요소 스타일을 제어하는 ​​방법에 대한 분석 예의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!