DOM中的修改样式

最新推荐文章于 2024-06-30 10:06:58 发布

XUPT-前端在逃工程师

最新推荐文章于 2024-06-30 10:06:58 发布

阅读量885

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/Dimuzero/article/details/110581445

版权

JavaScript 专栏收录该内容

40 篇文章 1 订阅

订阅专栏

DOM修改样式

通过修改html来实现修改元素样式的目的（间接修改）

1. 修改行内样式

通过修改html标签属性中的style来达到修改元素样式的目的

Element.style.display =  'none'
Element.style.backgroundColor = 'red'
Element.style.transform = 'translate(' + number+ 'px)'

注意：
a.backgroundColor关于背景的写法，去掉-并且后面的后缀描述首字母大写
b.width,height,translate()记住后面都要带 ‘px’ 字符串否则不生效
c.

2. 添加层叠样式表

通过classList进行操作（类名是字符串使用）

Element.classList.add("类名")	//添加
Element.classList.remove("类名")	//删除
Element.classList.contains("类名")	//判断是否存在（存在true，不存在false）

3.大小写转换

toUpperCase 转大写
toLocaleUpperCase 按本地方法转大写
toLowerCase 转小写
toLocaleLowerCase 按本地方法转小写

nodeName获取的是元素名称的大写字符串

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <li class="p1">li</li>
    <ul class="p2">Ul</ul>
    <script>
        var p1 = document.querySelector('.p1').nodeName
        var p2 = document.querySelector('.p2').nodeName
        console.log(p2);
        var p3 = p2.toLowerCase()
        console.log(p3)
        var p4 = p3.toUpperCase()
        console.log(p4)
    </script>
</body>
</html>

XUPT-前端在逃工程师

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DOM中的修改样式

DOM修改样式通过修改html来实现修改元素样式的目的（间接修改）1. 修改行内样式通过修改html标签属性中的style来达到修改元素样式的目的Element.style.display = 'none'Element.style.backgroundColor = 'red'Element.style.transform = 'translate(' + number+ 'px)' 注意：a.backgroundColor关于背景的写法，去掉-并且后面的后缀描述首字母大写b.wid
复制链接

扫一扫

专栏目录