<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>访问与设置元素样式</title>
<script src="js/jquery.js"></script>
<style>
.divstyle{
border: 5px solid black;
background-color: silver;
}
.trstyle{
background-color: lightskyblue;;
color: black;
}
.
</style>
<script type="text/javascript">
//页面加载完成简写形式
$(function(){
//设置单元格宽度100px
//$("td").css("width","300px");
//$("td").css("font-size","30px");
//$("td").css("color","red");
//$("td").css("border","1px solid red");
$("td").css({"width":"300px","font-size":"30px","color":"red","border":"1px solid red"})
//获取div背景颜色,css可以设置元素属性，也可以获取css属性
var color= $("div").css("background-color");
alert(color);
//设置斑马线，隔行背景颜色变成蓝色，字体变黑色 odd偶数行,如果同时设置多个类加，号隔开
$("tr:odd").addClass("trstyle");
//移出对应元素的css样式,移出DIV的样式,如果不穿参数，则表示移出所有CSS样式
$("div").removeClass("divstyle");
})
</script>
</head>
<body>
<div class="divstyle">
<table>
<tr><td>用户名1</td><td>密码1</td></tr>
<tr><td>用户名2</td><td>密码2</td></tr>
<tr><td>用户名3</td><td>密码3</td></tr>
<tr><td>用户名4</td><td>密码4</td></tr>
<tr><td>用户名5</td><td>密码5</td></tr>
<tr><td>用户名6</td><td>密码6</td></tr>
<tr><td>用户名7</td><td>密码7</td></tr>
<tr><td>用户名8</td><td>密码8</td></tr>
<tr><td>用户名9</td><td>密码9</td></tr>
<tr><td>用户名10</td><td>密码10</td></tr>
</table>
</div>
</body>
</html>
时间： 2024-11-05 06:13:35