jquery如何为元素设置style？

Posted 2020-11-21 yuyuanno1

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery如何为元素设置style？相关的知识，希望对你有一定的参考价值。

$("#userLevelCss").attr("style","width:78%;float: right;display: none;");

、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、、

记录一下用javascript原生代码以及jQuery 设置/获取属性的方法：

（文章最下面有完整版代码）

首先把JavaScript的奉上

function attribute() {

        var val=document.getElementById("in1").value,
            a1=document.getElementById("a1"),
            d2=document.getElementById("d2");

        //第一种直接设置本身自有属性方法
        a1.href="https://www."+val+".com";

        //第二种设置自定义属性方法
        d2.setAttribute("url","https://www."+val+".com");

        //获取选中属性的值
        var d1Url=d1.getAttribute("url");
        console.log(d1Url);

        //设置样式
        d2.style.background="#FAB2C9";
    }

运行结果如下：

技术分享图片

再来就是jQuery的

        //设置属性、值
        $("#a2").attr("href","http://www.w3school.com.cn/");

        //同时设定多个
        $("#a2").attr({
            "data-num":"50",
            "target":"view_window"
        });

        //获取选择属性的值：
        var a2Href=$("#a2").attr("href");
        console.log("a2链接地址为："+a2Href);


        //设定样式
        $("#d2").css("border","5px solid #8E00FF");

        //同时设定多个
        $("#d2").css({
            "width" : "200",
            "height" : "50",
            "background":"#E058EA"
        });

运行结果如下：

技术分享图片

整篇代码

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #d1{
            width:200px;height:50px;
        }
    </style>
</head>
<body>

<div>
    <h3>JavaScript</h3>

    <input type="text" id="in1"  value="baidu"/>

    <div id="d1"></div>

    <a href="#" id="a1">超链接</a>
</div>

<hr>

<div>
    <h3>jQuery</h3>

    <a href="#" id="a2">点我跳转</a>

    <div id="d2"></div>
</div>



<script>
    function attribute() {
        var val=document.getElementById("in1").value,a1=document.getElementById("a1"),d1=document.getElementById("d1");

        //第一种设置本身自有属性方法
        a1.href="https://www."+val+".com";

        //第二种设置自定义属性方法
        d1.setAttribute("url","https://www."+val+".com");

        //获取选中属性的值
        var d1Url=d1.getAttribute("url");
        console.log(d1Url);

        //设置样式
        d1.style.background="#FAB2C9";
    }

    attribute();

</script>


<script src="jquery-1.12.4.min.js"></script>

<script>

        //设置属性、值
        $("#a2").attr("href","http://www.w3school.com.cn/");

        //同时设定多个
        $("#a2").attr({
            "data-num":"50",
            "target":"view_window"
        });

        //获取选择属性的值：
        var a2Href=$("#a2").attr("href");
        console.log("a2链接地址为："+a2Href);


        //设定样式
        $("#d2").css("border","5px solid #8E00FF");

        //同时设定多个
        $("#d2").css({
            "width" : "200",
            "height" : "50",
            "background":"#E058EA"
        });
</script>
</body>
</html>