快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

jquery获取样式,jquery获取样式属性值

jquery怎么获取style里面的属性值

jquery获取style的属性值有两种方法

成都创新互联公司专注于企业成都营销网站建设、网站重做改版、海东网站定制设计、自适应品牌网站建设、H5建站商城网站开发、集团公司官网建设、外贸营销网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为海东等各大城市提供网站开发制作服务。

第一种是getElementById() 方法。它可以返回对拥有指定 ID 的第一个对象的引用。在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

第二种是getElementsByName() 方法,它可以返回带有指定名称的对象的集合。该方法与getElementById() 方法相似,但是它查询元素的 name 属性,而不是 id 属性。另外,因为一个文档中的 name 属性可能不唯一(如 HTML 表单中的单选按钮通常具有相同的 name 属性),所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。

jquery如何获取页面使用指定样式的个数

思路:在页面设计时就将指定的样式设置为一个class,然后应用到需要的元素上。那么此时可以通过类选择器来获取使用指定样式的个数

$("some_class").length;  // 获取应用了some_class的元素的个数

实例演示:本例将红色设置为一个类 red,并应用到不同的元素中去,然后可以通过上述方法获取应用的个数

创建Html元素

div class="box"

span class="red"点击按钮获取应用了红色样式的元素的个数:/spanbr

div class="content"

table

trtd1/tdtd2/tdtd3/td/tr

trtd4/tdtd class="red"5/tdtd6/td/tr

trtd7/tdtd8/tdtd9/td/tr

/table

ul

  liGlen/li

  li class="red"Tane/li

  liJohn/li

  li class="red"Ralph/li

/ul

/div

input type="button" value="获取应用了红色样式的元素的个数"

/div

设置css样式

div.box{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

div.boxspan{color:#999;font-style:italic;}

div.content{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

table{border-collapse:collapse;}

td{width:30px;height:30px;line-height:30px;text-align:center;border:1px solid green;}

li{margin:5px;list-style: none;}

.red{color:red !important;}

编写jquery代码

$(function(){ 

$("input:button").click(function() {

alert($(".red").length);

});

});

观察效果

jquery怎么获取下一个具有指定样式(class)的元素呢?

分为以下2种情况: 

1.如果css写成行内样式,可以通过获取style属性的值来判断,示例如下: 

判断id为divid的div元素是否有font-size样式:

2.如果css写成类样式,可以通过获取class属性的值来判断,示例如下: 

判断id为divid的div元素是否含有类样式divclass:

描述: 为每个匹配的元素添加指定的样式类名

$('div').addClass('className');//为所有div添加名为className的class1

removeClass 

描述: 移除集合中每个匹配元素上一个,多个或全部样式。

$('div').removeClass('className');//将所有div上名为className的class移除1

toggleClass 

描述: 在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。

$('div').toggleClass('className');//如果div上有这个class就删除,没有就添加。

jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法

使用jQuery获取样式中的background-color的值时发现在获取到的颜色值在IE10以下版本中是以HEX格式显示【#ffff00】,而IE10,、Chrome、Firefox中则是以GRB格式显示【rgb(255,0,0)】,由于需要对颜色值进行判断处理,所以需要得到统一的颜色格式,最好是HEX格式的,方便处理点。搜索了一下,从国外的一个网站上得到一段代码:

复制代码

代码如下:

$.fn.getHexBackgroundColor

=

function()

{

var

rgb

=

$(this).css('background-color');

rgb

=

rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

function

hex(x)

{return

("0"

+

parseInt(x).toString(16)).slice(-2);}

return

rgb=

"#"

+

hex(rgb[1])

+

hex(rgb[2])

+

hex(rgb[3]);

}

上面定义的是一个jQuery函数,我们可以通过

$("#bg").getHexBackgroundColor();

获取到标签id="bg"的background-color的RGB值。

下面做一下小小的修改,就是加一个判断,如果是显示HEX值(IE10以下)就直接拿值,如果是非IE浏览器则将值转换成RGB格式:

复制代码

代码如下:

$.fn.getBackgroundColor

=

function()

{

var

rgb

=

$(this).css('background-color');

if(rgb

=

0)

return

rgb;//如果是一个hex值则直接返回

else{

rgb

=

rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);

function

hex(x)

{return

("0"

+

parseInt(x).toString(16)).slice(-2);}

rgb=

"#"

+

hex(rgb[1])

+

hex(rgb[2])

+

hex(rgb[3]);

}

return

rgb;

}

jQuery中,$(“p”).css()方法是设置或获取对象的样式属性的。A、对B、错?

对,使用css()可以实现,写两个参数是设置,写一个参数是获取。

但是获取的样式不一定全等于设置的,比如颜色,设置是“red”,获取是rgb(255, 0, 0)

JQuery中如何获取样式属性的值?

css方法:

1、取得第一个段落的color样式属性的值。

$("p").css("color");

2、将所有段落的字体颜色设为红色并且背景为蓝色。

$("p").css({ color: "#ff0011", background: "blue" });

html

head

titleJQuery中如何获取样式属性的值/title

script type="text/javascript" src="jquery.js"/script

style

.top {

background: url(Tupian.jpg) no-repeat;

width: 75px;

height: 90px;

}

/style

script type="text/javascript"

$(function () {

var url = $("div.top").css("background-image");

alert(url);

})

/script

/head

body

div class="top"/div

/body

/html


网页名称:jquery获取样式,jquery获取样式属性值
转载注明:http://6mz.cn/article/dsgcdhe.html

其他资讯