HTML DOM style属性操作

た入场券 2024-04-19 10:47 108阅读 0赞

> dom.style.property:通过元素的style属性间接操作css样式

### 一，修改颜色 ###

title.style.color：修改节点的颜色

<body>
        <h1 id="title">修改颜色</h1>
    </body>
    <script>
        let title = document.getElementById("title");
        title.style.color = "#333fff";
    </script>

### 二，修改背景颜色 ###

style.background：修改背景颜色

<body>
        <h1 id="title">修改背景颜色</h1>
    </body>
    <script>
        let title = document.getElementById("title");
        title.style.background = "#333999";
    </script>

### 三，修改节点大小 ###

style.width：修改节点宽度

<body>
        <div id="box" style="margin: auto;width: 100px;height: 100px;background: turquoise"></div>
    </body>
    <script>
        let box = document.getElementById("box");
        box.style.width = "200px";
    </script>

### 四，修改节点的位置 ###

style.marginTop：设置节点位置

<body>
        <div id="box" style="margin: auto;width: 100px;height: 100px;background: turquoise"></div>
    </body>
    <script>
        let box = document.getElementById("box");
        box.style.marginTop = "300px";
    </script>

### 五，几何形状 ###

#### （1），正方形 ####

let box = document.getElementById("box");
        box.style.width = "300px";
        box.style.height = "300px";
        box.style.background = "turquoise";

#### （2），长方形 ####

let box = document.getElementById("box");
        box.style.width = "300px";
        box.style.height = "100px";
        box.style.background = "turquoise";

#### （3），圆形 ####

let box = document.getElementById("box");
        box.style.width = "300px";
        box.style.height = "300px";
        box.style.background = "turquoise";
        box.style.borderRadius = "150px";

发表评论取消回复

表情：

评论列表（有 0 条评论，108人围观）

还没有评论，来说两句吧...

相关阅读

相关 HTML DOM style属性操作

dom.style.property:通过元素的style属性间接操作css样式一，修改颜色 title.style.color：修改节点的颜色 <...

た入场券/ 2024年04月19日 10:47/ 0 赞/ 109 阅读

相关进度条：计时函数、DOM操作修改html属性、DOM操作修改文本内容

重点：用到计时函数 DOM操作修改html属性 DOM操作修改文本内容思路：用计时器函数每间隔一段时间就增加一些进度条长度，刚开始进度条有其他全部

﹏ヽ暗。殇╰゛Y/ 2024年03月17日 23:31/ 0 赞/ 98 阅读

相关 HTML--style属性值之中的属性

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

Myth丶恋晨/ 2023年07月20日 08:21/ 0 赞/ 72 阅读

相关 html dom节点源码,HTML DOM children 属性

HTML DOM children 属性元素对象实例获取 body 元素的子元素集合： var c = document.body.children; 定义和用

Dear 丶/ 2022年10月09日 15:18/ 0 赞/ 280 阅读

相关十六、使用jQuery操作元素 —— DOM属性与HTML元素属性

在jQuery官方文档中，分别是这样对应的。属性：Attributes；CSS：CSS。区分DOM属性和HTML元素属性 HTML元素的属性大家应该都知道，比如<img>

╰半橙微兮°/ 2022年10月03日 00:32/ 0 赞/ 312 阅读

相关 setAttribute与style.property：关于初识HTML DOM属性设定的一点思考

对于HTML DOM 来说，我一直用setAttribute来设定属性值，后来很多问题通过 document.getElementsByTagName("id").s

喜欢ヅ旅行/ 2022年05月18日 06:13/ 0 赞/ 56 阅读

相关【DOM编程艺术】style属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

矫情吗；*/ 2022年01月06日 06:23/ 0 赞/ 328 阅读

相关 html 样式之style属性的使用

转自：https://www.ggbiji.com/html-style.html html中的style属性是用来改变html元素的样式的，样式是在html 4 引入的，

痛定思痛。/ 2021年12月23日 09:39/ 0 赞/ 415 阅读

相关 HTML_07 —— style属性和样式

背景颜色：<h1 style="background-color:pink"> 设置了标题的背景颜色是pink </h1> 字体：<h2 style="font-

梦里梦外;/ 2021年12月13日 18:01/ 0 赞/ 266 阅读

相关 HTML style 属性

参数解析: value:行内样式代码。

小灰灰/ 2020年05月16日 21:03/ 0 赞/ 942 阅读