jq 查找dom 添加css属性

最新推荐文章于 2023-09-05 14:28:51 发布

乐多

最新推荐文章于 2023-09-05 14:28:51 发布

阅读量637

点赞数

分类专栏： jq

本文链接：https://blog.csdn.net/weixin_44769592/article/details/96838234

版权

jq 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

js与jq对比

1.利用原生js查找dom

var div1=document.getElementsByTagName("div")[0];

利用js为dom添加css属性

div1.style.backgroundColor="red";

2.利用jq查找dom

var $div4=$(".one");

是不是简化了超多！！！

用jq添加css属性

$div4.css({
	background:"red"}
        );

上代码

<!DOCTYPE html>
<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<meta charset="utf-8">
<script type="text/javascript">
    //script 写在上面 
    // window.onload=function(ev)
    // {
    //     //1.利用原生js查找dom
    //     var div1=document.getElementsByTagName("div")[0];
    //     var div2=document.getElementsByClassName("two")[0];
    //     var div3=document.getElementById("three");
    //     console.log(div1);
    //     console.log(div2);
    //     console.log(div3);
    //     div1.style.backgroundColor="red";
    //     div2.style.backgroundColor="black";
    //     div3.style.backgroundColor="blue";
    //     //2.利用原生js修改背景颜色
    // }
    //由打印结果可以看出 jq的变量被先打印
    $(function(){
        var $div4=$(".one");
        var $div5=$(".two");
        var $div6=$("#three");
        // console.log($div4);
        // console.log($div5);
        // console.log($div6);
        $div4.css(
            {background:"red"}
        );
        $div5.css({
            background:"black"
        });
        $div6.css({
            background:"blue"
        });
    });
</script>
<style>
    div{
        width: 200px;
        height:200px;
        border: 1px solid #000;
    }
</style>
</head>
<body>
    <div class="one"></div>
    <div class="two"></div>
    <div id="three"></div>
    
</body>
</html>

乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq 查找dom 添加css属性

js与jq对比1.利用原生js查找domvar div1=document.getElementsByTagName("div")[0];利用js为dom添加css属性div1.style.backgroundColor="red";2.利用jq查找domvar $div4=$(".one");是不是简化了超多！！！用jq添加css属性$div4.css({ backgr...
复制链接

扫一扫