jQuery 修改样式

修改样式属性

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 200px;height: 200px;background-color: skyblue;}</style><script src="./jquery.min.js"></script>
</head><body><div></div><script>// 操作样式之css$(function () {// 参数只写属性名,返回属性值 返回200pxconsole.log($('div').css("width"));//1.修改单个属性// 属性名要加引号//$('div').css("width", "300px");//2.修改多个属性//以对象的形式做修改,数字可以不加引号,不是数字需要加引号.属性采用驼峰命名法$('div').css({ width: 400, height: 400, backgroundColor: "red" });})</script>
</body></html>

设置类方式

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./jquery.min.js"></script><style>div {width: 200px;height: 200px;background-color: skyblue;transition: all 0.5s;}.red {background-color: red;}.circle {border-radius: 60px;}.current {transform: rotate(70deg);}</style>
</head><body><div class="circle">1</div><script>$(function () {//1.添加类addClass()$('div').click(function () {$(this).addClass("red");})//2.删除类$("div").mouseover(function () {$(this).removeClass("circle");})//3.切换类 有则删除,没则添加$("div").click(function () {$(this).toggleClass("current");})})</script>
</body></html>

jQuery 修改样式相关推荐

JavaScript jQuery修改样式
jQuery可以使用css方法来修改简单元素样式;也可以操作类,修改多个样式. 修改元素样式 1.参数只写属性名,则是返回属性值 $(this).css("color"); 2.参 ...
jquery修改样式通过css方法
$(this).css("color","red"); 是给元素对象添加一组样式也可以通过以下方式来给元素对象一次性添加多组样式, 但要遵从一个规则:如果是复 ...
jquery修改样式通过类
toggleClass方法比较特殊,当前元素有这个类的时候就移除这个类,当前元素没有这个类的时候就添加这个类示例代码: <!DOCTYPE html> <html><h ...
如何使用jquery修改css中带有!important的样式属性
<div class="test">使用jquery修改css中带有!important的样式属性</div> 外部样式为: div.test{width: ...
jQuery修改!important的css样式jQuery修改css未生效
当我们使用jQuery修改带有!important的css样式或者jQuerycss样式未生效可尝试以下解决办法 1.解决办法原有代码: <!DOCTYPE html> <html ...
Jquery 改变样式
Jquery简单的操作 Jquery 是一个非常好用JS库,有很多的特殊的操作,为了方便,我们都可以引入Jquery. <script src="dist/js/vendor/jque ...
editor修改样式 vue_vue修改富文本中的元素样式
富文本编辑器目前应用很广泛,而有时候我们想要对其中的一些元素的样式进行修改,就会遇到问题. 首先,直接修改是不可行的,因为是用v-html标签进行渲染的,无法直接获取到. 在修改的时候,一般是按标签进 ...
jquery操作样式
jquery操作样式的方法 addClass()追加样式: removeClass()删除样式: toggle()切换样式: hasClass()判断样式 attr()获取或者设置样式获取修改样式时 ...
jQuery操作样式及属性样式
一.jQuery操作样式 css操作 1.设置单个样式 //css(name, value); //name:需要设置的样式名称 ;value:对应的样式值 $("#one").c ...

jQuery 修改样式

修改样式属性

设置类方式

jQuery 修改样式相关推荐

最新文章

热门文章