jQuery操作css的元素样式

1.访问匹配元素的样式属性

来个小案例：

//宽高都是200px，背景颜色红色;

怎么获取div的属性值呢：

$("#div").css("width")//这就可以获取到宽的值

console.log($("#div").css("width"))//打印一下看看结果

结果出来了：

那怎么把宽和颜色改变一下呢：

$("#div").css("width"，"300px")//这样在属性后边跟个值就可以了，宽就变成300px了；

$("#div").css("background"，"yellow")//这样背景颜色就变成了黄色；

$("#div").css({"width":"300px","background":"yellow"})//这是一个组合的写法是不是要比上边简单；

回调函数的写法：

$("#div").click(function() {

$(this).css({

width: function(index, value) {

return parseFloat(value) * 2;

},

height: function(index, value) {

return parseFloat(value) * 2;

}

});

});

//这是一个点击事件每当点击div的时候它本身都会放大2倍；

2.css位置操作

2.1 offset([coordinates])获取匹配元素在当前视口的相对偏移

案例：

获取元素在当前视口的相对偏移：

$("#div").offset();//这样就可以获取到偏移值；

console.log($("#div").offset());//怎么也得打印一下看看结果啊 ；

打印结果：

当然能够获取值肯定还是能够赋值的：

$("#div").offset({left：50,top:100})//这样就可以了 引号是可以不用加的，最后结果是距离视口左边50px，上边100px；

2.2 position()获取获取匹配元素相对父元素的偏移

注意到没有position后边()里边没有中括号[]这个是只能获取不能赋值的；

使用方法：

$("p").position()//这样就可以获取到距离父元素左边和上边的距离了；

scrollTop([val])获取匹配元素相对滚动条顶部的偏移

使用方法：

$("div.demo").scrollTop(300);//滚动距离顶部300px；

$("div.demo").scrollTop(0);//这样就是在顶部了 也可以说回到顶部；

scrollLeft([val])获取匹配元素相对滚动条左部的偏移

使用方法：

同上；

css尺寸操作：

3.1 height([val|fn])：

$("div").height()//这是获取当前元素的高不算边框的和隐藏部分；

$("div").haight(function(n,c){

return c+10;

})

//这是一个函数使用方法，这样div本身的高就增加10px；

3.2 width([val|fn])：

同上！

3.3 innerHeight()：

$("div").innerHeight()//这是获取当前元素的高和隐藏和空白部分；

3.4 innerWidth():

同上！

3.5 outerHeight([options]):

$("#div").outerHeight()//这样使用是默认为fales 只获取当前高度；

$("#div").outerHeight(true)//这样使用不仅获取当前高度还获取了空白 边框 隐藏部分；

3.6 outerWidth():

同上！

jQuery CSS 操作

jQuery CSS 操作 jQuery 拥有三种用于 CSS 操作的重要函数: $(selector).css(name,value) $(selector).css({properties}) $ ...

jQuery CSS操作及jQuery的盒子模型

jQuery CSS-jQuery CSS方法 jQuery CSS-jQuery盒子模型

jQuery CSS 操作函数(六)

CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. offset() 返回第一个匹配元素相对于文档的位置. offsetParent() 返回 ...

jQuery CSS 操作 - offset() 方法

今天在一个页面需要知道jquery版本号,来决定使用什么样的方法,有以下方式可以获取到 $.fn.jquery $.prototype.jquery 这两种方式都可以获取到jquery的版本号 --- ...

抽屉点赞及jQuery CSS操作

1.需要用到的知识点: CSS处理 $('t1').css('color','red') 点赞: -$('t1').append() -$('t1').remove() -setInterval -o ...

jQuery CSS 操作函数

CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. offset() 返回第一个匹配元素相对于文档的位置. offsetParent() 返回 ...

jQuery CSS 的操作函数

jQuery CSS 操作函数 下面列出的这些方法设置或返回元素的 CSS 相关属性. CSS 属性 描述 css() 设置或返回匹配元素的样式属性. height() 设置或返回匹配元素的高度. o ...

jQuery 属性操作和CSS 操作

如有在jQuery方法中涉及到函数,此函数必定会返回一个数值(函数由于运行次数不同触发一些不同效果) jQuery 属性操作方法(以下方法前些日子学习过,不再赘述) addClass() attr() ...

Jquery DOM 操作列表

jQuery 文档操作方法 这些方法对于 XML 文档和 HTML 文档均是适用的,除了:html(). jQuery 属性操作方法 下面列出的这些方法获得或设置元素的 DOM 属性. 这些方法对于 ...

随机推荐

Android—锁定横屏遇到的问题

Android开发应客户需求需要锁定横屏,期间遇到的问题与大家共享一下: 首先在项目清单文件中设置: android:screenOrientation="landscape"// ...

visualssh 是一个可视化的ssh客户端

这两个周末写了visualssh,一个可视化的ssh客户端.里面集成了putty的功能,通过ssh协议与Linux server通讯. 以后可以针对不同的应用编写相关插件,便于管理Linux服务器上的 ...

php 配置正确的时间

关于php时区时间错误问题 date 当前时间 时差 当地 本地date_default_timezone_set 之前有一个遗留问题,就是echo date("y-m-d h:i:s&qu ...

使用Metasploit进行端口扫描

Metasploit中不仅能够使用第三方扫描器Nmap等,在其辅助模块中也包含了几款内建的端口扫描器. 查看Metasploit框架提供的端口扫描工具: msf > search portsca ...

巧用Freemarker的自定义方法

要想使用Freemarker支持的自定义方法,需要实现freemarker.template.TemplateMethodModel接口,然后将方法对象放入到Freemarker的数据模型中,这样在f ...

javascript基础学习(十五)

javascript之cookie 学习要点: cookie介绍 创建与获取cookie cookie的编码 cookie的生存期 cookie的路径 cookie的domain cookie的sec ...

JS字符串拼接优化

// 请把以下用于连接字符串的JavaScript代码修改为更高效的方式 var htmlString = ‘ < div class=”container” > ’ + ‘ < u ...

CSS中选择器优先级顺序实战讲解

原文:CSS中选择器优先级顺序实战讲解 我们有些程序猿在给一个元素(比如div)应用样式的时候,会有一些疑问,为什么我写在后面的样式不能覆盖前面的样式呢,不是说CSS是层叠样式表吗? 如果你在开发中也 ...

Java之反射--练习

定义Student 类:包含:姓名和年龄等属性,有参和无参构造方法,输出所有信息的方法 1.使用多种方法生成一个Student类的Class对象 2.使用Class类获取Student类的结构信息并输 ...

happymall 第十一章订单表 数据表设计

为订单号生成唯一索引,用用户id和订单号生成组合索引提高查询效率.