JavaScript修改Css样式

在JS中操作CSS属性命名上的区别

以前css直接写死在html中，现在可以通过js脚本去动态修改一个标签的样式。

CSS中写法	JS中的写法	说明
color	color	一个单词的样式写法是相同
font-size	fontSize	驼峰命名法，首字母小写，第二个单词以后首字母大写

方式一：

元素.style.样式名 = “样式值”;

方式二：

元素.className = “类名”;

JS修改CSS的示例代码

需求

点按钮，修改p标签的字体、颜色、大小

代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript操纵Css</title>
<style type="text/css">.two{color: rebeccapurple;font-size: 45px;font-family: "BIZ UDP明朝 Medium";}
</style>
</head>
<script type="text/javascript">//方式一：修改多个样式属性function changeCss () {//color: blue; font‐size: 30px; font‐family: 楷体;
//得到first这个pvar p1 = document.getElementById("first");
//语法：元素.style.样式名=样式值;p1.style.color = "blue";p1.style.fontSize = "30px";p1.style.fontFamily = "楷体";}//方式二：首先创建一个类样式，然后一条语句一次性修改所有的样式function changeClass () {var p2 = document.getElementById("second");
//语法：元素.className = "类名";p2.className = "two";}
</script>
<body>
<p id="first">元素.style.样式名 = "样式值";
</p>
<p id="second">元素.className = "类名";
</p>
<input type="button" value="style.样式名,修改多个样式属性" onclick="changeCss()"/>
<input type="button" value="className,改变类样式" onclick="changeClass()"/>
</body>
</html>

效果

JavaScript修改Css样式相关推荐

Vue中动态使用JavaScript修改CSS样式
文章目录前言一.实现目标效果的难点二.使用Computed配合CSS变量完成动态修改CSS 1.设置Computed属性以及slider行内属性 2. 设置css样式(这里使用的是原生css,l ...
HTML：三种方法用JavaScript修改CSS样式
修改元素的css样式一般是标签的style属性中或头部的style标签中进行增删与修改. 下为利用JS修改元素的css样式的三种较为实用的方式. 第一种:获取相应标签对应的 javascript对象. ...
html5 js 修改css样式,JavaScript修改css样式style_javascript技巧_脚本之家
一.局部改变样式分为改变直接样式,改变className和改变cssText三种.需要注意的是: 注意大小写: javascript对大小写十分敏感,className不能够把"N&quo ...
javascript 动态修改css样式
方法一:改变外联css文件,这里不讲这个. 方法二:通过改变claaName来改变样式,语法: obj.className = "style2";//或者 obj.setAttri ...
javascript、jquery 动态修改css样式方法
javascript.jquery 动态修改css样式方法 javascript 修改样式的方法第一种.使用obj.className来修改样式表的类名 var obj = document.get ...
原生Javascript/原生JS修改CSS样式的四种方式
设置style var domName = document.querySelector('#domName'); domName.style.backgroundColor = '#aaa' 设置属 ...
JS添加/修改CSS样式
JS添加/修改CSS样式是通过.style.xxxx属性=值来实现的,记得是等号赋值. document.getElementById("xx").style.xxx=xxxxx; ...
asp.net 动态修改css样式,ASP.NET中直接用C# 动态修改CSS样式
ASP.NET中直接用C#动态修改CSS样式 wonsoft(wonsoft@163.com) 使用JavaScript控制CSS样式有点麻烦,还是觉得直接使用C#操作更方便快捷,本文通过两个Butt ...
做html时css经常无效果,修改CSS样式无效有什么原因？
修改CSS样式为什么会无效?原因是什么?下面本篇文章就来给大家介绍一下修改CSS样式无效的原因,有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 一.HTML 标签未关闭这是版面设计 ...

JavaScript修改Css样式

在JS中操作CSS属性命名上的区别

方式一：

方式二：

JS修改CSS的示例代码

需求

代码

效果

JavaScript修改Css样式相关推荐

最新文章

热门文章