时间戳

首页 > 解决方案 > 尝试根据 BG 颜色的代码更改按钮单击时的字体大小

javascript - 尝试根据 BG 颜色的代码更改按钮单击时的字体大小

问题描述

我正在尝试通过在线教程自学如何设计网站，并且我复制了该视频中的代码以更改按钮单击时的背景颜色。https://www.youtube.com/watch?v=Wj9JpCuMV60

我把代码改成了这个

<button>Switch Colour</button>
    <script type="text/javascript">
        var color = ["#0ff000","#f0ff0f","#000f00","#00f0ff"]
        var i = 0;
        document.querySelector("button").addEventListener("click", 
        function(){
        i = i < color.length ? ++i : 0;
        document.querySelector("body").style.background = color [i]
        })
    </script>

此代码有效，但是当我尝试调整代码以更改字体系列时，它什么也没做。

<button>Switch Colour</button>
        <script type="text/javascript">
            var color = ["#0ff000","#f0ff0f","#000f00","#00f0ff"]
            var i = 0;
            document.querySelector("button").addEventListener("click", 
            function(){
            i = i < color.length ? ++i : 0;
            document.querySelector("body").style.background = color [i]
            })
        </script>
<button>Switch Text Colour</button>
        <script type="text/javascript">
            var font-family = ["Helvetica","Impact"]
            var i = 0;
            document.querySelector("button").addEventListener("click", 
            function(){
            i = i < font-family.length ? ++i : 0;
            document.querySelector("body").style.body = font-family [i]
            })
        </script>

为什么顶部代码有效而底部代码（我的）无效？

标签： javascripthtmlcolors

解决方案

代替

document.querySelector("body").style.body = font-family[i]

利用：

document.querySelector("body").style.fontFamily = font-family[i]

或者：

document.body.style.fontFamily = font-family[i]

推荐阅读