Javascript HTML&；JS-如何修改CSS类atributes_Javascript_Html_Css_Class

Javascript HTML&；JS-如何修改CSS类atributes

javascript html css class

Javascript HTML&；JS-如何修改CSS类atributes,javascript,html,css,class,Javascript,Html,Css,Class,我有以下代码，但什么也没有发生： HTML: JS: 函数nav_fontsz（）{ var nav=document.querySelectorAll（'.nav'）； var navbtn=document.querySelectorAll（“.nav按钮”）；对于（i=0；i函数可能会运行，但代码中存在错误 navbtn将为空，因为此代码在呈现任何DOM节点之前运行。这就是为什么您会看到大量的$（document）.ready（）内容，您需要等到呈现DOM后再尝试获取节点另外，na

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

HTML:

JS:

函数nav_fontsz（）{
var nav=document.querySelectorAll（'.nav'）；
var navbtn=document.querySelectorAll（“.nav按钮”）；
对于（i=0；i函数可能会运行，但代码中存在错误
navbtn
将为空，因为此代码在呈现任何DOM节点之前运行。这就是为什么您会看到大量的$（document）.ready（）
内容，您需要等到呈现DOM后再尝试获取节点
另外，nav
未定义，因此警报也不会显示。我猜您已将其注释掉，因为document.getElementsByClassName（）
也会为您提供一个空节点列表
如果要确保重新调整大小处理程序运行，只需输入警报（“foo”）；
和其他内容。
您有三个不同的问题，第一个是简单的打字错误：
该函数未运行，因为在onresize中调用时缺少括号。请将其更改为：
<body onresize="nav_fontsz()">



您正在选择在页面上加载脚本时不存在的元素。您可以通过在nav_fontsz（）函数中移动设置“w”和“navbtn”的行来修复此问题，该函数在DOM加载后调用，如下面的示例代码所示
您使用的是querySelectorAll，但将结果视为单个对象，而实际上您选择的是一个或多个元素。将“navbtn”视为结果集，并遍历该结果集，设置每个元素的字体大小，如下面的示例代码所示
JavaScript（logoth.js）：
函数nav_fontsz（）{
var w=window.innerWidth，h=window.innerHeight；
var navbtn=document.querySelectorAll（“.nav按钮”）；
警报（'正在运行…'）；
var w=窗内宽度；
如果（w<800）{
对于（i=0；i

HTML:


导航1
导航2


演示：
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);
} 

<body onresize="nav_fontsz()">

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!');
}

<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>