jquery如何为元素设置style？

最新推荐文章于 2024-08-27 04:42:07 发布

转载最新推荐文章于 2024-08-27 04:42:07 发布 · 5.5k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/YuyuanNo1/p/9258988.html

文章标签：

#javascript #ViewUI

$("#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>