window.document对象

最新推荐文章于 2022-03-26 15:01:10 发布

weixin_34335458

最新推荐文章于 2022-03-26 15:01:10 发布

阅读量142

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/navyouth/p/7735925.html

版权

一查找元素

1、找元素

id查找

document.getElementById("id名字")；

根据class找

document.getElementsByClassName（"class名字"）；

根据标签名字找

document.getElementsByTagName("标签的名字")；

表单可以用name找

document.getElementByName（"name的值"）

2、对应css里面

id是#加id名{ }

class是.加class名{ }

标签直接用标签名{ }

二实例

JS中id和css中id

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
		 	#s{
				width:300px;
				height:300px;
				background-color:#0F0;
				}  
        </style>
    </head>
    
    <body>
        <div id="s"></div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("s")
    </script>

JS中class和css中class

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
		 	#s{
				width:300px;
				height:300px;
				background-color:#0F0;
				}
			.d{
				border:2px solid #F00;
				}  
        </style>
    </head>
    
    <body>
        <div id="s" class="d"></div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d")
    </script>

JS中标签和css中标签

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>无标题文档</title>
        <style type="text/css">
		 	#s{
				width:300px;
				height:300px;
				background-color:#0F0;
				}
			.d{
				border:2px solid #F00;
				}
			div{
				color:#F0F;
				}	  
        </style>
    </head>
    
    <body>
        <div id="s" class="d">你在</div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
    </script>

三操作

操作内容

a.innerHTML="修改后的内容"

	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.innerHTML="<font color='green'>我我我</font>"
    </script>

a.innerText=''修改后的内容''

	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.innerText="<font color='green'>我我我</font>"
    </script>

操作属性

a.setAttribute("属性名","属性值")修改或者添加属性

    <body>
        <div id="s" class="d"><font id="f" color="#000000">你在</font></div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("f");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.setAttribute("color","#666")
    </script>

a.getAttribute("属性名")获取属性

a.removettribute(属性名")移除属性

    <body>
        <div id="s" class="d"><font id="f" color="#000000">你在</font></div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("f");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.getAttribute("color")
		a.removeAttribute("color")
    </script>

操作样式

a.style.样式名=''修改后的样式值"

只能获取内联样式不能获取内嵌和外部样式但是都能修改

var w=a.style.backgroundColor在下面例子中无效获取不了背景色因为是内嵌；a.style.backgroundColor="#666"有效；能改

    <body>
        <div id="s" class="d">你在</div>
    </body>
	<script type="text/javascript">
		var a=document.getElementById("s");
		var b=document.getElementsByClassName("d");
		var c=document.getElementsByTagName("div");
		a.style.backgroundColor="#666"
    </script>

转载于:https://www.cnblogs.com/navyouth/p/7735925.html

weixin_34335458

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
window.document对象

一查找元素1、找元素<script type="text/javascript"> </script>id查找document.getElementById("id名字")；根据class找document.getElementsByClassName（"class名字"）；根据标签名字找document.getElementsByTa...
复制链接

扫一扫