搜尋

首頁 >web前端 >js教程 >jquery設定內嵌樣式css()

jquery設定內嵌樣式css()

无忌哥哥
无忌哥哥原創
2018-06-29 14:02:254808瀏覽

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中文網其他相關文章！

jquery css 运算符 字符串 字符串类型 对象 position
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：vue-cli專案中怎麼使用mock數據下一篇：vue-cli專案中怎麼使用mock數據

相關文章

看更多