jquery设置内联样式css()-tutorial js-php.cn

jquery设置内联样式css()

无忌哥哥

Lepaskan： 2018-06-29 14:02:25

asal

4768 orang telah melayarinya

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>

Salin selepas log masuk

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;
})

Salin selepas log masuk

2.读取样式 css(name),返回的都是字符串类型

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

Salin selepas log masuk

因为返回的是字符串,所以对于宽高等数据,如果要计算,就必须先转为数值型

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;)

Salin selepas log masuk

可以看出这样的操作是很麻烦的,但是宽高计算又使用的非常频繁

所以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;)

Salin selepas log masuk

等价于:

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

Salin selepas log masuk

设置宽高就更简单了,支持运算符的简写

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

Salin selepas log masuk

等价于:

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

Salin selepas log masuk

height()高度方法,用法与width()完全一致,请大家自行测试

除了宽高之年,获取元素当前的位置也是经常要用到的操作,jquery也定义了快捷方法

4.获取元素的位置:offset(),返回的是一个对象

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

Salin selepas log masuk

查询距离左边和顶部的偏移量

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

Salin selepas log masuk

可以看到这个操作反映的是元素在普通文档流的位置

如果元素采用了绝对定位,那么如何查看它在父级区块中的偏移量呢?

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

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

Salin selepas log masuk

offset()和position()方法仅适用于页面中的可视元素,并且仅能获取,不能设置

类似的还有scrollLeft()返回水平滚动条位置,scrollTop()返回垂直滚动条的位置,大家自行测试

控制台查看结果

console.log(res)

Salin selepas log masuk

Atas ialah kandungan terperinci jquery设置内联样式css(). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Php8, saya datang juga

Ketahui reka letak tapak web dalam masa 30 minit

Tutorial Video Permulaan Shangguan Oracle kepada Mahir

Baris pertama kod UNI-APP anda

Berkibar dari awal ke pelancaran apl

Tutorial Video Linux Baharu Brother Lian

Tutorial Video AXURE 9 (Sesuai untuk UI Reka Bentuk Produk Interaktif Pengurus Produk)

Tutorial Video PS Kemahiran Asas Sifar

Tutorial video UI 16 hari untuk anda bermula

Tutorial Video Teknik PS dan Teknik Menghiris

Tutorial Video Pembinaan Persekitaran Awan Alibaba dan Pelancaran Projek

Gambaran Keseluruhan Rangkaian Komputer - Pengetahuan Asas yang Perlu Dikuasai Pengaturcara

Tutorial Penting untuk Pengaturcara - Penjelasan Protokol HTTP

Tutorial Video Websocket

jquery设置内联样式css()