JS问题关于一些标签无法使用全局变量的问题

一个奇怪的现象,想用DOM来得到input里面的属性值,例如

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>新建网页</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />

        <script type="text/javascript">
        </script>

        <style type="text/css">
        </style>
    </head>
    <body>
        <h2>属性值操作</h2>
        <input type="text" addr="beijing" id="mingzi" name="username"  value="tom" class="orange" style="width:300px; height:200px; />
        <br /><br />
        <input type="button" value="获取" "f1()" />
    </body>
</html>

<script type="text/javascript">
// var name = document.getElementsByTagName('input')[0];
function f1(){
    //获得属性信息: 
    //1)节点.属性名称 该方式只能获得w3c规定的属性
    
    var name = document.getElementsByTagName('input')[0];
    console.log(name.style.width);
    console.log(name.type);//text
    console.log(name.id);//mingzi
    console.log(name.name);//username
    console.log(name.value);//tom
    //"class"是js的关键字需要变为className使用
    console.log(name.className);//orange
    //2)getAttribute()对于"规定的、自定义"属性都可以获取
    console.log(name.getAttribute('addr'));//beijing
    console.log(name.getAttribute('value'));//tom
}
</script>

这个程序只有在f1函数里面设置var name = document.getElementsByTagName(‘input’)[0];下面的操作才有值,在外面设置全局变量则在函数里面无法使用

当var name = document.getElementsByTagName(‘input’)[0];在函数f1外面的时候
在这里插入图片描述
当var name = document.getElementsByTagName(‘input’)[0];在函数f1里面的时候

另外一个例子

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style type="text/css">
	div{
		color:red;
		font-size:25px;
	}
</style>
</head>
<body>
	<h2>css样式操作</h2>
  <div style="width:300px; height:200px; background-color:lightblue;">Today is Wednesday</div>
 	<input type="button" value="获取" "f1()" /><br />
 	<input type="button" value="设置" "f2()" /><br />
</body>
</html>
<script type="text/javascript">
var dv = document.getElementsByTagName('div')[0];
function f1(){
	console.log(dv.style.width);
	console.log(dv.style.height); 
}
</script>

结果如下,表示f1可以使用全局变量dv
在这里插入图片描述
综上所述,是不是input这个标签使用dom的时候有特殊要求还是咋的

JS问题 关于一些标签无法使用全局变量的问题

猜你喜欢

JS问题关于一些标签无法使用全局变量的问题