JQueryDOM之CSS操作
程序员文章站
2022-06-15 14:46:27
...
CSS操作
主要介绍的方法：css()， 对于高度和宽度的操作，则简单说一下height()、width()
css(): 用于获取、设置元素的一个或多个属性 $(selector).css()
例：
$("p").css("color","red")：该示例用于设置元素的颜色属性为红色;
$("p").css("color")：该示例用于获得元素的color样式值
$("p").css({"font-size":"30px","backgroundColor","#888888"})：该示例用于设置元素的多个样式
height()、width()： jQuery提供的操作高度和宽度的方法，可用于获取和设置宽度和高度
获取 <p>元素的宽度 $("p").width();（高度同）
设置<p>元素的高度 $("p").height("100px");（宽度同）
案例源码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" src="../js/jquery-3.1.1.js" ></script>
<script>
$(function(){
$("#btn1").click(function(){
//设置id为div1的元素的高度为100px,宽度为100px,背景颜色为红色
$("#div1").css({"width":"100px","height":"100px","background":"red"});
//获取id为div1的元素背景颜色
$("#div1").css("background-color");
})
$("#btn2").click(function(){
// 设置p的宽度为80px
$("p").width("80px");
})
$("#btn3").click(function(){
alert($("p").height());
})
$("#btn4").click(function(){
alert($("#div1").css("background-color"));
})
})
</script>
</head>
<body>
<div id="div1">
<p style="height: 30px;background: blue">我是段落</p>
</div>
<button id="btn1">设置div的样式(宽度100px,高度100px,颜色：红色)</button>
<button id="btn2">设置标签p的宽度(80px)</button>
<button id="btn3">获取标签p的高度(80px)</button>
<button id="btn4">获取div的背景颜色</button>
</body>
</html>
上一篇： 类与PHP_PHP
下一篇： jQuery基础 jQueryDOM操作