目录
1 添加CSS
2 删除CSS
3 切换CSS
4 CSS()方法
5 CSS()多属性设置
6 带边距的外形尺寸
addClass() 方法为选定的元素添加一个或多个类。
例如:
HTML:
Some text
CSS:
.header {
color: blue;
font-size:x-large;
}
JS:
$("div").addClass("header");
上面的代码为div元素指定了一个“header”类。
要在 addClass() 方法中指定多个类, 只需使用空格分隔它们。 例如$("div").addClass("class1 class2 class3")
removeClass() 方法从所选元素中删除一个或多个类名。
例如:
$("div").removeClass("red");
上面的代码从div元素中删除“red”类。
同样,可以通过使用空格分隔来指定删除多个类名。
toggleClass() 方法从所选的元素添加/删除类之间切换,这意味着如果元素指定的类存在,则它将被删除,如果不存在,则会被添加。
为了演示此操作,我们将处理一个按钮单击事件来切换一个类。 我们将在未来的模块中更多地了解事件及其语法。
HTML:
一些文本
CSS:
.red {
color:red;
font-weight: bold;
}
JS:
$(function() {
$("button").click(function() {
$("p").toggleClass("red");
});
});
上面的代码在点击按钮时切换类名“红色”。
与 html() 方法类似,可以使用 css() 方法来获取和设置CSS属性值。
例如:
HTML:
一些文本
CSS:
p {
background-color:red;
color: white;
}
JS:
$(function() {
alert($("p").css("background-color"));
$("p").css("background-color", "blue");
});
上面的代码弹出获取的段落 background-color 属性值,然后将其值设置为blue。
css() 方法可以使用 json 语法设置多个CSS属性。
语法:
css({"property":"value","property":"value",...});
语法由“属性”:“值”对组成,以逗号分隔,并以大括号{}括起来。
例如:
$("p").css({"color": "red", "font-size": "200%"});
这将设置预设的颜色和字体大小属性。
你可以使用此JSON语法指定任意数量的属性。
外形尺寸
可以使用 width() 和 height() 方法来获取和设置HTML元素的宽度和高度。
下面代码中我们将div的宽度和高度设置为100px,并为其设置背景颜色:
$("div").css("background-color", "red");
$("div").width(100);
$("div").height(100);
width() 和 height() 方法获取并设置尺寸,而不包括填充,边框和边距。
innerWidth()和innerHeight()方法包括填充部分的尺寸。
outerWidth()和outerHeight()方法包括填充和边框部分的尺寸。
查看这张图片了解他们的工作原理:
以下示例演示了该方法的工作原理:
HTML:
CSS:
div {
width: 300px;
height: 100px;
padding: 10px;
margin: 20px;
border: 3px solid blue;
background-color: red;
color: white;
}
JS:
$(function() {
var txt = "";
txt += "width: " + $("div").width() + " ";
txt += "height: " + $("div").height() + "
";
txt += "innerWidth: " + $("div").innerWidth() + " ";
txt += "innerHeight: " + $("div").innerHeight() + "
";
txt += "outerWidth: " + $("div").outerWidth() + " ";
txt += "outerHeight: " + $("div").outerHeight();
$("div").html(txt);
});