从getelementbyid中排除表单元素

exclude form elements from getelementbyid

本文关键字:表单 元素 排除 getelementbyid      更新时间:2023-09-26
function changemysize(myvalue) { 
    var div = document.getElementById( "content" );
    div.style.fontSize = myvalue + "em";
    document.cookie="mysize=" + myvalue;
}

这将改变内容div中所有文本的大小,这非常棒。

它还改变了任何表单输入字段的大小,这不是那么可怕。

从该函数中排除"content"div内的HTML表单字段的好方法是什么?

--------- 更多信息 ----------

我在标题中使用这个函数来动态地改变标题下面所有文本的字体大小。

<div id="adjust">Click to Adjust Size: 
    <span style="font-size: 1em;">
        <a href="javascript:void(0);" onClick="changemysize(1);">A</a>
    </span>
    <span style="font-size: 1.2em;">
        <a href="javascript:void(0);" onClick="changemysize(1.2);">A</a>
    </span>
    <span style="font-size: 1.4em;">
        <a href="javascript:void(0);" onClick="changemysize(1.4);">A</a>
    </span>
</div>

由于我的标题以<div id="content" class="site-content">结尾,所有页面内容都被调整大小,包括表单字段。有办法排除它们吗?

您可以获得div的子字段,然后分别设置它们的字体大小,检查它们是否属于<input>字段,如下所示:

JavaScript:

// The code is self-explanatory, ask though if you need help
function changemysize(myvalue) { 
    var childs = document.getElementById( "content" ).children;
    for(var i = 0; childs[i]; i++){
        if(childs[i].tagName !== "form")
            childs[i].style.fontSize = myvalue + "em";
    }
    document.cookie="mysize=" + myvalue;
}
changemysize(20);

演示(注意输入字段仍然很小)

这是一个CSS协议。我最终在所有表单字段中添加了一组字体大小(必须是"px"而不是"em"),这确实奏效了。