整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
s插件jquery可以很方便的對(duì)HTML的元素進(jìn)行操作，比如一些元素的顯示與隱藏，一些元素的動(dòng)態(tài)效果等，今天就說(shuō)一說(shuō)通過(guò)jquery獲取DIV元素的CSS屬性，以及設(shè)置DIV元素的CSS屬性的方法。
jq獲取DIV元素的屬性值，可以使用css()方法
例：利用jquery獲取DIV元素的寬
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
#mochu{
margin: 10px;
padding: 10px;
color: red;
height: 30px;
width: 40px;
}
</style>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飛鳥(niǎo)慕魚(yú)博客<br/>http://www.feiniaomy.com</div>
<script>
var h = $('#mochu').css('width');
console.log(h);
</script>
</body>
</html>
打印結(jié)果：
40px
例：利用jquery獲取DIV元素的高
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飛鳥(niǎo)慕魚(yú)博客<br/>http://www.feiniaomy.com</div>
<script>
var h = $('#mochu').css('height');
console.log(h);
</script>
</body>
</html>
打印結(jié)果：
42px
注意：
1、如果給DIV元素定義了CSS屬性的值，則直接輸出定義的CSS值
2、如果未定義DIV元素的CSS屬性值，則輸出瀏覽器渲染后DIV的默認(rèn)值
在JQ中可以通過(guò)CSS方法獲取DIV元素的CSS屬性值，也可以設(shè)置或改變?cè)氐腃SS屬性值
例：利用jq改變字體的顏色
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飛鳥(niǎo)慕魚(yú)博客<br/>http://www.feiniaomy.com</div>
<script>
$('#mochu').css('color','red');
</script>
</body>
</html>
結(jié)果如圖：
注：改變DIV中字體的顏色其實(shí)就是給這個(gè)DIV加入了一個(gè) color 的CSS屬性，并把屬性值設(shè)置成 red（紅色）
在瀏覽器中查看元素就可以發(fā)現(xiàn)加入的CSS屬性
例：給DIV元素加入多個(gè)CSS屬性
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<div id="mochu">飛鳥(niǎo)慕魚(yú)博客<br/>http://www.feiniaomy.com</div>
<script>
$('#mochu').css({'color':'red','heigth':'40px','width':'40px'});
</script>
</body>
</html>
在瀏覽器中審核元素，如下圖
可以發(fā)現(xiàn)，對(duì)過(guò)JQ設(shè)置的CSS屬性都寫到了DIV上
注意：利用JQ的CSS()方法設(shè)置或添加多個(gè)CSS屬性的時(shí)候，要以{'':'','':''}這種數(shù)據(jù)格式寫入。
開(kāi)發(fā)過(guò)程中，jQuery.html() 是獲取當(dāng)前節(jié)點(diǎn)下的html代碼，并不包含當(dāng)前節(jié)點(diǎn)本身的代碼，然后我們有時(shí)候確需要，找遍jQuery api文檔也沒(méi)有任何方法可以拿到。
看到有的人通過(guò)parent().html()，如果當(dāng)前元素沒(méi)有兄弟元素還行，如果有那就行不通了。后臺(tái)實(shí)驗(yàn)發(fā)現(xiàn)有一個(gè)jQuery的一個(gè)方法可以解決，而且非常簡(jiǎn)便，如下：
jQuery.prop("outerHTML");
<div class="test"><p>hello，你好！</p></div>
<script>$(".test").prop("outerHTML");</script>輸出結(jié)果為：<div class="test"><P>hello,你好！</p></div>
因?yàn)樵鶭S DOM里有一個(gè)內(nèi)置屬性 outerHTML （看清大小寫哦，JS是區(qū)分大小寫的）用來(lái)獲取當(dāng)前節(jié)點(diǎn)的html代碼(包含當(dāng)前節(jié)點(diǎn))，所以用jQuery的prop()能拿到，經(jīng)過(guò)實(shí)驗(yàn)attr()方法是拿不到的，不信的話，大家也可以嘗試嘗試，謝謝。
當(dāng)然也有人用jQuery的 clone() 函數(shù)配合append() 來(lái)創(chuàng)建一個(gè)只有一個(gè)子元素的節(jié)點(diǎn)，然后來(lái)拿節(jié)點(diǎn)的html，這樣也是可行的，但是代碼繁瑣。
ndex.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<title>模態(tài)窗口</title>
</head>
<body>
<script>
//alert(1);
function pop(){
//傳遞參數(shù)到模態(tài)窗口
var obj=new Object();
obj.name="Hello World---來(lái)自父窗口";
var returnStr = window.showModalDialog("model.html",obj,
"dialogHeight=200px;dialogTop=200px;dialogLeft=200px;");
alert("模態(tài)窗口返回參數(shù)"+returnStr);
//刷新頁(yè)面
window.location.reload();
}
</script>
<button onClick="pop()">打開(kāi)模態(tài)窗口</button>
<p>模態(tài)窗口傳參數(shù)，并獲取返回值</p>
</body>
</html>
model.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<script>
// 接受父窗口的參數(shù)
var obj=window.dialogArguments;
alert(obj.name);
// 返回參數(shù)到父窗口
window.returnValue=’Hello World---來(lái)自模態(tài)窗口’;
</script>
模態(tài)窗口
</body>
</html>
如果直接在瀏覽器中無(wú)法正常運(yùn)行，那么就將其放在服務(wù)器容器中。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
