jquery设置内联样式css()

来源：互联网 2024-10-12 19:11:34

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" alt="jquery设置内联样式css()" ><p><p></p></p></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) //200res += 50var 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().leftvar res = $(&#39;img&#39;).offset().top

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

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

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

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

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

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

控制台查看结果

console.log(res)

jquery设置css样式

本文地址：http://www.wztg.net/wenda/69818.html

免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）