jQuery学习-设置访问元素样式

最新推荐文章于 2024-09-12 14:28:05 发布

weixin_30597269

最新推荐文章于 2024-09-12 14:28:05 发布

阅读量63

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/whzym111/p/6068791.html

版权

<!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>