HTML&JS-如何修改CSS类的属性

HTML & JS - How to modify CSS class atributes

本文关键字：修改 CSS 属性 amp JS- 何修改 HTML      更新时间：2023-09-26

我有以下代码，但什么都没发生：

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

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

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

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

如果您想确保调整大小处理程序运行，只需放入alert("foo");，而不需要其他内容。

您有三个不同的问题，第一个是简单的打字错误：

  1. 函数没有运行，因为在onresize中调用它时缺少括号。更改为：

    <body onresize="nav_fontsz()">

  2. 您正在选择在页面上加载脚本时不存在的元素。您可以通过在nav_fontsz（）函数中移动设置"w"answers"navptn"的行来解决这个问题，该函数在DOM加载后调用，如我下面的示例代码所示。

  3. 您使用querySelectorAll，但将结果视为单个对象，而实际上您选择的是一个或多个元素。将"navptn"视为结果集，并遍历该集，设置每个元素的字体大小，如下面的示例代码所示。

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/

相关文章：