700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 如何通过jQuery动态设置元素CSS的样式 以及HTML中CSS “内联式” “嵌套式” “外

如何通过jQuery动态设置元素CSS的样式 以及HTML中CSS “内联式” “嵌套式” “外

时间:2023-02-18 05:24:11

相关推荐

如何通过jQuery动态设置元素CSS的样式 以及HTML中CSS “内联式” “嵌套式” “外

html元素使用CSS渲染标签的样式,可以通过内联式嵌套式外联式来将CSS样式添加到html中。有时候涉及到动态的参数,或者在事件中需要修改不同元素的CSS样式时,可以通过js获取目标元素,再其修改CSS样式。

嵌套式通过style属性设置元素样式

<p style="font-size: 18px;color: pink; padding: 0;float: right;" >this is a p</p>

内联式在head标签中使用style元素包含css代码

<style>/*设置class为number的元素的CSS样式*//*有没有注意到style标签里面的注释方式和外部html代码的注释方式都不一样:)*/.number{width:120px; height:80px;background-color:#B46381;margin: 0;display: block;}</style>

外联式通过link标签来引入外部的css文件

<link rel="stylesheet" type="text/css" href="myCss.css">

jQuery设置css样式用css()设置样式

//1.设置单个样式$('div1').css("color","pink");//2.设置多个样式//这里要注意和CSS写法的区别,属性名和值用引号括起来,多个属性值之间以逗号间隔$('.number').css({"width":"60px","height":"40px","background-color":"#B46381","margin":0,"display": "block"});//换个写法可能更容易理解,这不就是个json对象哇。。。var numberCss = {"width":"60px","height":"40px","background-color": "#B46381","margin":0,"display": "block"};$('.number').css(numberCss);

如何通过jQuery动态设置元素CSS的样式 以及HTML中CSS “内联式” “嵌套式” “外联式”使用方法

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。