jquery操作元素的样式index.html:<html><head><title>js</title><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/></head><body><div>显示的内容</div><button>添加class</button><button>删除class</button><butt
index.html:
<html><head><title>js</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/></head><body><div >显示的内容</div><button >添加class</button><button >删除class</button><button >toggle切换class</button><button >获取css属性</button><button >更改css属性</button></body><script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script><script type="text/javascript" src="./index.js"></script><style>.testCla{color:red;}</style></html>
index.js:
$(function(){var dom = $("#content_id");$("#add_btn").click(function(){dom.addClass("testCla");});$("#remove_btn").click(function(){dom.removeClass("testCla");});$("#toggle_btn").click(function(){dom.toggleClass("testCla");});$("#get_btn").click(function(){console.log(dom.css("backgroundColor"));});$("#change_btn").click(function(){dom.css("backgroundColor","yellow")});});
注:
addClass:用来给元素添加一个class;
removeClass:用来给元素删除一个class;
toggleClass:用来动态的添加和删除class;
css:用来获取一个元素的属性;同样的也可以用来设置一个元素属性;
拓展:
css的方法设置属性时,需要使用驼形命名属性,驼形命名法:首字母小写,之后每个单词首字母大写;