用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使用有所帮助。