Question

我有以下代码，没有任何反应：

HTML：

<head>
<script type="text/javascript" src="log-oth.js"></script>
</head>

<body onResize="nav_fontsz()">

JS：

function nav_fontsz(){
    var nav = document.querySelectorAll('.nav');
    var navbtn = document.querySelectorAll('.nav-button');

    for (i=0 ; i<navbtn.length ; i++){
        navbtn[i].style.fontSize = (nav[0].style.width / 3.5)+'px';}

    alert(nav[0].style.width);
}

加号，警告框显示任何内容，甚至不显示0

Answer 1

该函数可能会运行，但代码中存在错误。

navbtn将为空，因为此代码在呈现任何DOM节点之前运行。这就是为什么你会看到很多$(document).ready()的东西，你需要等到你的DOM被渲染才会尝试获取节点。

此外，nav未定义，因此警报也不会显示。我猜你评论了它，因为document.getElementsByClassName()也给你一个空的NodeList。

如果你想确保调整大小处理程序的运行，只需添加alert("foo");而不是其他内容。

Answer 2

你有三个不同的问题，第一个是简单的拼写错误：

由于在onresize中调用括号时缺少括号，因此该函数无法运行。将其更改为：
```
<body onresize="nav_fontsz()">
```
您正在选择在页面上加载脚本时不存在的元素。您可以通过在nav_fontsz（）函数中移动设置'w'和'navbtn'的行来解决这个问题，该函数在DOM加载后调用，如下面的示例代码所示。
您正在使用querySelectorAll但将结果视为单个对象，而实际上您正在选择一个或多个元素。将'navbtn'视为结果集并迭代整个集合，设置每个元素的字体大小，如下面的示例代码所示。

JavaScript（log-oth.js）：

function nav_fontsz() {
    var w = window.innerWidth, h = window.innerHeight;
    var navbtn = document.querySelectorAll('.nav-button');

    alert('Running...');

    var w = window.innerWidth;

    if (w < 800) {
        for (i = 0; i < navbtn.length; i++) {
            alert(navbtn.length);
            navbtn[i].style.fontSize = (w / 3.5) + 'px';
        }
    }

    alert('Done!');
}

HTML：

<head>
    <script type="text/javascript" src="log-oth.js"></script>
</head>
<body onresize="nav_fontsz()">
    <ul>
        <li class="nav-button">Nav 1</li>
        <li class="nav-button">Nav 2</li>
    </ul>
</body>

演示：http://jsfiddle.net/BenjaminRay/9kq1dv10/

HTML＆amp; JS - 如何修改CSS类属性

2 个答案: