• jQuery如何获取样式属性的值并进行修改
  • 发布于 2个月前
  • 211 热度
    0 评论

用jQuery获取样式属性,并修改样式属性是我们jQuery最常见的操作之一。今天我就总结一下使用jQuery和js获取样式属性,并进行样式属性修改的常见操作。比如我们可以用jQuery获取颜色的样式属性值,并进行修改,除了根据CSS样式,我们还可以根据attribute属性来获取值和修改值。看一下实际例子吧。

1.获取和修改样式 style

// 堆代码 duidaima.com
// 原生 js 方式
var widthvalue = document.getElementById(selector).style.width; // 获取样式的具体值
document.getElementById(selector).style.width='40px';

// JQuery 方式
var colorvalue = $(selector).css("color"); // 获取样式的具体值
$(selector).css("color","red"); // 修改样式 color 的值为 red 等,允许连续多组
$(selector).css({
    "color":"white",
    "font-size":"20px"
});
2.获取和修改属性 attribute
// 原生 js 方式
document.getElementById(selector).setAttribute('style','height:400px;'); // 原先有值的直接替换
document.getElementById(selector).removeAttribute('style');
document.getElementById(selector).id = "elementid"; // 给属性赋值,注不支持自定义属性
var stylevalue = document.getElementById(selector).getAttribute('style');

// JQuery 方式
$(selector).attr("style","全部样式"); // 修改属性 style 的值
$(selector).attr({"style":"全部样式"});
$(selector).removeAttr('style'); // 移除名字为 style 属性
$(selector).attr("style"); // 获取属性 style 的值
3.修改类 class
// 堆代码 duidaima.com
// 原生 js 方式
var classname = document.getElementById(selector).className; // 获取类型属性的值
document.getElementById(selector).className = 'classname'; // 若原来有值,将会被替换
document.getElementById(selector).className += ' classname2'; // 注意:类名前需加一个空格,且不能省略
document.getElementById(selector).classList.add('classname2'); // 在原有类的基础上,添加
document.getElementById(selector).classList.replace('classname','classname2'); // 将 classname 替换为 classname2
var booleannn = document.getElementById(selector).classList.contains('classname'); // 若包含就返回 true

// JQuery 方式
var classname = $(selector).attr("class"); // 获取类型属性的值
$(selector).addClass("classname"); // 添加类
$(selector).removeClass("classname"); // 删除类
$(selector).toggleClass("classname"); // 切换类,如果有则删除,如果没有则添加

总结:

以上就是我们使用jQuery获取样式的值,并进行修改的常见操作,希望对于你的jQuery使用有所帮助。

用户评论