likes
comments
collection
share

不使用JavaScript也能直接修改样式，这一波你学废了吗？

作者站长头像
站长
· 阅读数 30

不使用 JavaScript 也能直接修改样式？听起来有点不可思议，但是接下来我就带你一起来看看这个神奇的效果是如何实现的。

先来看效果，建议在 Chrome 浏览器中查看：

浏览器样式

大家有没有思考过一个问题？为什么我们在写html代码的时候，例如<h1>标签，为什么它的字体就是那么大？为什么它会加粗？

有的人心里可能已经有答案了，有的人可能还在等我给出答案，答案先不着急，我再问下一个问题。

为啥我们在写meta、head、title、style、link、script等标签的时候，为什么它们会不显示？

ok，停止思考，打开浏览器控制台，找到样式面板，定位到我上面说的这些标签，看看它们的样式是什么？

不使用JavaScript也能直接修改样式，这一波你学废了吗？

来看看我上面的截图，定位到<head>标签，看看它拥有一个样式display: none。

display大家都认识吧，display: none大家都知道是什么意思吧，就是不显示。

这里只为引出display，接下来我们再看另一个属性。

contenteditable

contenteditable是一个非常有意思的属性，它的作用是让元素变成可编辑的，也就是说，我们可以直接在浏览器中修改元素的样式。

它是一个可枚举属性，它的值必须是true或者false，默认值是false。

如果没有设置contenteditable的值，那么它的值就是空字符串，并且可编辑。

为啥要说这个属性呢？因为它可以让我们直接在浏览器中修改元素的样式。

display 和 contenteditable 的碰撞

上面说到meta、head、title、style、link、script等标签的样式都是display: none，那么我们现在将style修改为display: block，看看会发生什么？

<!DOCTYPE html>
<html>
<head style="display: block;">
    <title>不用javascript修改样式</title>
    <style style="display: block;">
        html {
            background: red;
            color: #fff;
        }
    </style>
</head>
<body>
</body>
</html>

注意：这里同时将<head>和<style>标签的display属性修改为block，这样它们才能显示出来。

不使用JavaScript也能直接修改样式，这一波你学废了吗？

哦豁，咱们写的样式显示出来了，接下来大家应该都知道该怎么做了吧？

接下来修改一下空白符显示的样式，将white-space属性设置为pre，再加点过渡效果，接着我们就可以不使用javascript，直接修改样式了。

<!DOCTYPE html>
<html>
<head style="display: block;">
    <title>不用javascript修改样式</title>
    <style style="display: block;white-space: pre;-webkit-user-modify: read-write-plaintext-only;" contenteditable>
        * {
            transition: all .3s;
        }

        html {
            background: red;
            color: #fff;
        }
    </style>
</head>
<body>
</body>
</html>

注意：这里使用到了-webkit-user-modify: read-write-plaintext-only;，目前这个属性只能在webkit内核的浏览器中使用，其他浏览器均不支持； 如果不加这个属性，那么换行符 和 空格符 等特殊字符都会被转义，这样样式会失效，所以在 Chrome 浏览器中使用最佳。

本文正在参加「金石计划 . 瓜分6万现金大奖」