JS对CSS的操作

外太空程序员

于 2022-09-28 16:54:22 发布

阅读量218

点赞数 1

文章标签： javascript css servlet

本文链接：https://blog.csdn.net/qq_48516121/article/details/127092787

版权

两种方法：

CSS中写法	JS中的写法	说明
color	color	样式名如果是一单词，写法是一样的
font-size	fontSize	如果有多个单词，样式名中的横杠去掉，后面的单词首字母大写

示例：

<head>

<style>

.one {

font-family: 微软雅黑;

color: pink;

font-size: 40px;

text-decoration: underline;

font-style: italic;

}

</style>

</head>

<body>

<p id="p1">第一自然段</p>

<p id="p2">第二自然段</p>

<hr/>

* 修改样式有两种方式

* 1、每一条语句改变一个样式

* 语法：元素.style.样式名=样式值；

* 2、先使用class定义类样式，然后再使用以下的方法一次性修改一批样式

* 语法：元素.(classname)类名=类样式名；

* */

//第一种方法展现

document.getElementById("b1").οnclick=function () {

var p1=document.getElementById("p1");

p1.style.fontFamily="楷体";

p1.style.color="red";

p1.style.fontSize="40px";

}

//第二种方法

function change2() {

var p2=document.getElementById("p2");

p2.className="one";

}

</script>

</body>

JS中两种改变CSS样式的写法：

1、每一条语句改变一个样式

语法：

元素.style.样式名="样式值";

2、先使用class定义类样式，然后再使用以下的方法一次性修改一批样式

语法：

元素.className="类样式名";

内置对象：字符串对象

String一个基本数据类型，同时它又是js的内置对象

函数名	说明
substring(start-index,end-index)	取子字符串，包头不包尾，索引从0开始，参数是起始位置
subtr(from,length)	取字符串，起始位，长度
split("符号")	把一个字符串使用指定的分隔符，切割成一个数组
touppercase()	转大写
tolowercase()	转小写
trim（）	去掉前后空格
indexof	根据字符串找索引
charAt（）	根据索引找字符串

内置对象：数学对象

学习Math对象的方法

方法名	作用
round()	四舍五入取整
floor()	向下取整
ceil()	向上取整
random()	随机数，[0,1）

全局函数

什么是全局函数：

不需要依托对象去完成的功能，（直接使用）所有window这个全局对象里的方法都是全局函数。

小结：

字符串转数字	说明
parsetInt	字符串转整数
parsetFloat()	字符串转小数
isNaN	非数字

编码和解码	说明
encodeURL	编码
decodeURL	解码
eval("字符串")	执行字符串的脚本

内置对象：数组

2.数组的方法：

方法名	功能
reverse()	反转元素
join("=")	将数组的元素按指定符号连接成字符串
sort()	排序
pop（）	删除最后一个元素
concat（）	拼接数组
push()	添加元素在最后面