JQuery操作元素的style属性

编程之家收集整理的这篇文章主要介绍了JQuery操作元素的style属性编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

搜索热词

可以直接利用css()方法获取元素的样式属性

JQuery代码如下:

$("p").css("color");  //获取p元素的样式颜色无论color属性是外部CSS导入,还是直接拼接在HTML元素里(内联),css()方法都可以获取属性style里的其他属性的值。

也可以直接利用css()方法设置某个元素的单个样式,例如:

$("p").css("color","red");  //设置p元素的样式颜色为红色

与attr()方法一样,css()方法也可以同时设置多个样式属性代码如下:

//同时设置字体大小和背景色$("p").css({"fontSize":"30px" ,"backgroundColor":"#ccc"});
如果值是数字,将会被自动转化为像素值。
在css()方法中,如果属性中带有“-”符号,例如font-size和background-color属性,如果在设置这些属性的值的时候不带引号,那么就要用驼峰式写法,
比如上面的代码,如果带上了引号,既可以写成“font-size”,也可以写成“fontSize”。总之建议大家加上引号,养成良好的习惯。
对透明度的设置,可以直接使用opacity属性,jQuery已经处理好了兼容性的问题,如下代码所示,将p元素的透明度设置为半透明:
$("p").css("opacity","0.5"); 
如果需要获取某个元素的height属性,则可以通过如下JQuery代码实现:
$(element).css("height");

在jQuery中还有另外一种方法也可以获取元素的高度,即height()。它的作用是取得匹配元素当前计算的高度值(px):

$("p").height();    //获取p元素的高度值height()方法也能用来设置元素的高度,如果传递的值是一个数字,则默认单位为px。如果要用其他单位(例如em),则必须传递一个字符串,JQuery代码如下:
$("p").height("100px"); //设置p元素的高度值为l00px$("p").height("2em");   //设置p元素的高度值为2em1.在jQuery l.2版本以后的height()方法可以用来获取window和document的高度。2.两者的区别是:css()方法获取的高度值与样式的设置有关,可能会得到“auto”,也可能得到”10px”之类的字符串;
而height()方法获取的高度值则是元素在页面中的实际高度,与样式的设置无关,并且不带单位。

与height()方法对应的还有一个width()方法,它可以取得匹配元素的宽度值(px):

$("p").width(); //获取p元素的宽度值同样,width()方法也能用来设置元素的宽度。
$("p").width("400px");   //设置p元素的宽度值为400px

offset()方法
它的作用是获取元素在当前视窗的相对偏移,其中返回的对象包含两个属性,即top和left,它只对可见元素有效。例如用它米获取p元素的的偏移量:

var offset = $("p").offset();   //获取p元素的offset()var left = offset.left;   //获取左偏移var top =  offset.top;    //获取右偏移

position()方法
它的作用是获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对偏移,与offset()一样,它返回的对象也包括两个属性,即top和left。JQuery代码如下:

var position = $("p").position();    //获取p元素的position()     var left = position.left;    //获取左偏移     var top = position.top;    //获取右偏移

scrollTop()方法和scrollLeft()方法
这两个方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离。例如使用下面的代码获取p元素的滚动条距离:

var $p =  $("p");var scrollTop = $p.scrollTop();    //获取元素的滚动条距顶端的距离var scrollLeft = $p.scrollLeft();    //获取元素的滚动条距左侧的距离
另外,可以为这两个方法指定一个参数,控制元素的滚动条滚动到指定位置。例如使用如下代码控制元素内的滚动条滚动到距顶端300和距左侧300的位置:
$("textarea").scrollTop (300);    //元素的垂直滚动条滚动到指定的位置
$("textarea").scrollLeft (300); //元素的横向滚动条滚动到指定的位置

至此

总结

以上是编程之家为你收集整理的JQuery操作元素的style属性全部内容,希望文章能够帮你解决JQuery操作元素的style属性所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的jQuery相关文章

目录验证码实现效果如下:生成验证码的方法:生成验证码随机背景颜色在html中引用完整源码下载地址:验证码实现效果如下:生成验证码的方法:function code_draw() { var canvas_width = $('#canvas').width(); var canvas_height = $('#canvas').height(); var canvas = document.getElementById("canvas"); //获取到canvas
比如info是一个字符串变量,如果需要去该变量的值,需要使用下面的语句:语法:alert($("#"+id).val());例如:使用id设置隐藏控件 $(".img").mouseover(function(event){ var html=event.target.innerHTML; //alert(html); var aid=html.match(/<a id="(...
使用js去除字符串内所带有空格,有以下三种方法:( 1 ) replace正则匹配方法去除字符串内所有的空格:str = str.replace(/s*/g,"");去除字符串内两头的空格:str = str.replace(/^s*|s*$/g,"");去除字符串内左侧的空格:str = str.replace(/^s*/,"");去除字符串内右侧的...
1.开启disabled,是input不可以编辑$("#input_id").attr("disabled","disabled");2.关闭disabled$("#input_id").removeAttr("disabled");普通js中是这样写的,document.getElementById("input_id").disabled = false;...
最近自学了一段时间的HTML、CSS、JavaScript、jQuery。通过自己这段时间学到的一点小知识,自己制作了一个小app------简易备忘录在此简单记录一下,同时也希望有更好创意的朋友提出改进意见或者指++++++++++++++++++++++++++++++++++++++++++++++++++++++++++开发工具:HBui
http://www.runoob.com/jquery/jquery-chaining.htmljQuery- 链(Chaining)通过jQuery,可以把动作/方法链接在一起。Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)。jQuery方法链接直到现在,我们都是一次写一条jQuery语句(一条接着另一条)。不过,有一
jQuery拥有以下滑动方法:slideDown(),slideUp(),slideToggle()1、jQueryslideDown()方法用于向下滑动元素。$(selector).slideDown(speed,callback);可选的speed参数规定效果的时长。它可以取以下值:"slow"、"fast"或毫秒。可选的callback参数是滑动完成后所执行的函数名称
一、宽度和高度获取宽度.width()描述:为匹配的元素集合中获取第一个元素的当前计算宽度值。这个方法不接受任何参数。.css(width) 和 .width()之间的区别是后者返回一个没有单位的数值(例如,400),前者是返回带有完整单位的字符串(例如,400px)。当一个元素的宽度需要数学计算的时候推