스타일 작업을 위해 jquery에서 CSS 및 클래스 메서드를 사용하는 방법
- 清浅원래의
- 2018-11-13 14:48:452158검색
본 글의 내용은 jQuery 연산 스타일과 스타일 변경에 대한 사례를 소개하는 것입니다. 참고할만한 내용이 있으니 참고하시면 도움이 될 것 같습니다
# 🎜🎜 #
jQuery 작업 스타일
클래스 작업
(1)判断是否有样式类
hasClass(name)//name:用于判断的样式类名，返回值为true false
判断div是否有demo的样式类
$(“div”).hasClass(“demo”)
(2)添加样式类
addClass(name)//name指需要添加的样式类名，注意参数不要带点.
//给div添加demo的样式。
$(“div”).addClass(“demo”);
(3)移除样式类
removeClass("name")//name:需要移除的样式类名
//移除div中demo的样式
$(“div”).removeClass(“demo”); #🎜🎜 #css 작업(작업은 스타일 속성)(1)获取样式
css(name)//name:需要获取的样式名称
//获取div的背景颜色属性
$("div").css("background-color");
注意：获取样式操作只会返回第一个元素对应的样式值。
(2)设置单个样式
css(name,value)//name：需要设置的样式名称,value：对应的样式值
//给一个div标签的背景修改成红色
$("div").css("background","red");
（3）设置多个样式
css(obj)//参数是一个对象，对象中包含了需要设置的样式名和样式值
//例如
$("#one").css({
"background":"gray",
"width":"400px",
"height":"200px"
});
케이스 공유: 인터레이스 색상 변경#🎜🎜 ## 🎜🎜#JQuery에서 CSS 작업 및 클래스 작업을 통해 배경색 변경 <!DOCTYPE html>
<html>
<head><meta charset="UTF-8"></head>
<body>
<style>
*{
padding: 0;
margin:0;
}
ul{list-style: none;
}
li{
width:300px;
height:30px;
background-color:rgb(14,150,249);
}
.even{
background-color:rgb(241,70,215);
}
</style>
<ul>
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
<li>第四个</li>
<li>第五个</li>
<li>第六个</li>
</ul>
<script src="jquery/jquery-1.12.4.js"></script>
<script>
$(function(){
//给奇数的li修改背景颜色
$("li:odd").css("backgroundColor","pink");
//给偶数的li添加even类
$("li:even").addClass('even');
});
</script>
</body>
</html>
요약: 
이상은 jQuery 콘텐츠를 배우는 모든 분들께 도움이 되는 내용입니다.
위 내용은 스타일 작업을 위해 jquery에서 CSS 및 클래스 메서드를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!