jquery設定內嵌樣式css()-js教程-PHP中文網

jquery設定內嵌樣式css()

无忌哥哥

發布： 2018-06-29 14:02:25

原創

4795 人瀏覽過

jquery設定內聯樣式css()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>设置内联样式css()</title>
<style type="text/css">
.box1 {
width: 300px;
height: 300px;
background-color: wheat;
position: relative;
}
.box2 {
width: 100px;
height: 100px;
background-color: coral;
position: absolute;
top: 50px;
left: 100px;
}
</style>
</head>
<body>
<img src="../images/jsy.jpg">
<div>
<div></div>
</div>
</body>
</html>

登入後複製

css()方法與attr()方法很相似,也是自帶讀到與設定特徵

根據參數數量決定要執行的操作,一個參數是讀取,二個參數是設定

功能相當於讀到或設定目前元素的style屬性的值,其實就是內聯樣式

1.設定樣式css(name,value)

var res = $(&#39;img&#39;).css(&#39;width&#39;,200)
var res = $(&#39;img&#39;).css(&#39;border-radius&#39;, &#39;10%&#39;)
var res = $(&#39;img&#39;).css(&#39;box-shadow&#39;, &#39;3px 3px 3px #888&#39;)
var res = $(&#39;img&#39;).css({
&#39;width&#39;: &#39;200&#39;,
&#39;border-radius&#39;: &#39;10%&#39;,
&#39;box-shadow&#39;: &#39;3px 3px 3px #888&#39;
})

登入後複製

2.讀取樣式css(name),傳回的都是字串型別

var res = $(&#39;img&#39;).css(&#39;box-shadow&#39;)
var res = $(&#39;img&#39;).css(&#39;width&#39;)

登入後複製

因為傳回的是字串,所以對於寬高等資料,如果要計算,就必須先轉為數值型

var res = parseInt($(&#39;img&#39;).css(&#39;width&#39;), 10) //200
res += 50
var res = $(&#39;img&#39;).css(&#39;width&#39;,res+&#39;px&#39;)

登入後複製

可以看出這樣的操作是很麻煩的,但是寬高計算又使用的非常頻繁

所以jquery針對寬高樣式有二個專用方法: width()和height()

3.width()和height()方法

將圖片寬高設定為200,單位預設為px

var res = $(&#39;img&#39;).width(200)
var res = $(&#39;img&#39;).width(&#39;200&#39;)
var res = $(&#39;img&#39;).width(&#39;200px&#39;)
var res = $(&#39;img&#39;).width(&#39;200pt&#39;)

登入後複製

等價於:

var res = $(&#39;img&#39;).css(&#39;width&#39;,200)

登入後複製

設定寬高就更簡單了,支援運算子的簡寫

var res = $(&#39;img&#39;).width(&#39;+=100&#39;)
var res = $(&#39;img&#39;).width()  //300

登入後複製

等價於:

var res = $(&#39;img&#39;).css(&#39;width&#39;,&#39;+=50&#39;)
var res = $(&#39;img&#39;).width()  //250

登入後複製

height()高度方法,用法與width()完全一致,請大家自行測試

除了寬高之年,獲取元素當前的位置也是經常要用到的操作,jquery也定義了快捷方法

4.取得元素的位置:offset(),傳回的是一個物件

var res = $(&#39;img&#39;).offset()

登入後複製

查詢距離左邊和頂端的偏移量

var res = $(&#39;img&#39;).offset().left
var res = $(&#39;img&#39;).offset().top

登入後複製

可以看到這個動作反映的是元素在普通文檔流的位置

如果元素採用了絕對定位,那麼如何查看它在父級區塊中的偏移量呢?

5.查看絕對定位元素的偏移量: position()

var res = $(&#39;.box2&#39;).position().left
var res = $(&#39;.box2&#39;).position().top

登入後複製

offset()和position()方法僅適用於頁面中的可視元素,並且僅能獲取,不能設定

類似的還有scrollLeft()返回水平滾動條位置,scrollTop()返回垂直滾動條的位置,大家自行測試

控制台查看結果

console.log(res)

登入後複製

以上是jquery設定內嵌樣式css()的詳細內容。更多資訊請關注PHP中文網其他相關文章！