前端研习录（29）——JavaScript CSS操作讲解及示例分析

前端研习录（前端研习录（29）——JavaScript CSS操作讲解及示例分析

版权声明

本文原创作者：清风不渡
博客地址：https://blog.csdn.net/WXKKang

重拾前端记忆，记录学习笔记，现在进入JavaScript CSS操作部分

一、HTML元素的style属性

通过使用网页元素节点的setAttribute方法直接操作网页元素的style属性，示例如下：

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>清风不渡title>
head>
<body>
    <div class="box" id="box1">Hellodiv>


    <script>
        var box1 = document.getElementById("box1");
        box1.setAttribute(
            'style',
            'height: 200px;'+'width: 200px;'
            +'background-color: aqua;'+'border: 3px solid yellowgreen;'
        );
    script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

执行结果如下：
在这里插入图片描述

二、元素节点的style属性

通过取得元素节点的style属性，再来设置样式，示例如下：

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>清风不渡title>
head>
<body>
    <div class="box" id="box1">Hellodiv>


    <script>
        var box1 = document.getElementById("box1");
        var box1Style = box1.style;

        box1Style.height = "200px";
        box1Style.width = "200px";
        box1Style.backgroundColor = "green";
        box1Style.border = "3px solid red";

    script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

结果如下：
在这里插入图片描述

三、cssText属性

也可以通过cssText属性来设置样式，示例如下：

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>清风不渡title>
head>
<body>
    <div class="box" id="box1">Hellodiv>


    <script>
        var box1 = document.getElementById("box1");
        var box1Style = box1.style;

        box1Style.cssText = 
        'height: 200px;'+'width: 200px;'
        +'background-color: aqua;'+'border: 3px solid yellowgreen;'

    script>

body>
html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

结果如下：
在这里插入图片描述

相关阅读:
Docker部署nacos 添加配置文件提示：发布失败。请检查参数是否正确
网站：推荐几款好用的在线短链生成工具
Android修行手册 - ScrollView示例和监听
java-net-php-python-net本科生毕业设计选导师系统演示录像2019计算机毕业设计程序
Django视图（二）
UE中FRotator和Pitch(Roll,Yaw)以及相对朝向的关系
java毕业设计网上零食进销存源码+lw文档+mybatis+系统+mysql数据库+调试
uniapp 扫码功能
Flink - 内存模型详解
Mathorcup数学建模竞赛第二届-【妈妈杯】B题：公司业务数据分析(附带赛题解析&获奖论文及MATLAB代码)

原文地址：https://blog.csdn.net/WXKKang/article/details/126336438