CSS类
进行CSS操作的方法:
- addClass():向被选元素添加一个或多个类
- removeClass():从被选元素删除一个或多个类
- toggleClass():对被选元素进行添加/删除类的切换操作
- css():设置或返回被选元素的一个或多个样式属性
addClass()方法
作用:向被选元素添加一个或多个类
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").addClass("blue");
$("p,div").addClass("haha");
/*
$("h1,h2").addClass("blue");
$("div").addClass("haha");
$("p").addClass("blue haha"); //可在addClass()方法中规定多个类
*/
});
});
</script>
<style type="text/css">
.blue{
color:blue;
}
.haha{
font-size:30px;
}
</style>
<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另外一个段落。</p>
<div>这是一些重要的文本!</div>
<br>
<button>为元素添加 class</button>
运行结果:
点击按钮后:
removeClass()方法
作用:从被选元素删除一个或多个类
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").removeClass("blue");
});
});
</script>
<style type="text/css">
.blue{
color:blue;
}
</style>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>从元素中移除 class</button>
运行结果:
点击按钮后:
toggleClass()方法
作用:对被选元素进行添加/删除类的切换操作
例.
<script>
$(document).ready(function(){
$("button").click(function(){
$("h1,h2,p").toggleClass("blue");
});
});
</script>
<style type="text/css">
.blue{
color:blue;
}
</style>
<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另外一个段落。</p>
<br>
<button>切换 class</button>
运行结果:
点击按钮后:
css()方法
css()方法作用:设置或返回被选元素的一个或多个样式属性
返回CSS属性
语法:css(“propertyname”);
例.
将返回首个匹配元素的 background-color 值:
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
alert("背景颜色为:"+$("p").css("background-color")); //返回首个匹配元素的属性值
});
});
</script>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
运行结果:
点击按钮后:
设置CSS属性
语法:css(“propertyname”,”value”);
例.
为所有匹配元素设置 background-color 值:
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css("background-color","yellow"); //返回首个匹配元素的属性值
});
});
</script>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的 background-color </button>
</body>
运行结果:
点击按钮后:
设置多个 CSS 属性
语法:css({“propertyname”:”value”,”propertyname”:”value”,………});
例.
为所有匹配元素设置属性:
<body>
<script>
$(document).ready(function(){
$("button").click(function(){
$("p").css({"background-color":"yellow","font-weight":"bold"});
});
});
</script>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<p>这是一个段落。</p>
<button>为 p 元素设置多个样式</button>
</body>
运行结果:
点击按钮后: