どのようにJavaScriptでHTML元素とCSSスタイルを操作しますか?
74607 ワード
第3章あなたもコントロールがあります(DOM操作)
どのようにJavaScriptでHTML元素とCSSスタイルを操作して、簡単な動的操作を実現しますか? 3-1はDOM を知っています.−3 IDで要素 を取得する. 3-3 innerHTML属性 3-4 HTMLスタイルを変更する 3-5ディスプレー属性 3-6コントロールクラス名 第4章プログラミングチャレンジ
実践してスキルアップ. 4-1プログラミングチャレンジ
どのようにJavaScriptでHTML元素とCSSスタイルを操作して、簡単な動的操作を実現しますか?
実践してスキルアップ.
1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> DOMtitle>
6 head>
7 <body>
8 <p>HTML ， DOM :p>
9 <ol>
10 <li> ：<html>、<body>、<p> ， 。 li>
11 <li> : ， <li>...</li> JavaScript、DOM、CSS 。li>
12 <li> : ， <a> href="http://www.dhnblog.com/"。 li>
13 ol>
14 <p><img src="images/demo3-1-1.jpg" title=" ">p>
15 <p><img src="images/demo3-1-2.jpg" title=" ">p>
16 body>
17 html> 1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> ID title>
6 head>
7 <body>
8 <h3>helloh3>
9 <p id='con'>i love javascriptp>
10 <p> JavaScript 、 ， HTML ， ， 。p>
11 <script>
12 // document.getElementById("id")
13 var mystr=document.getElementById('con');
14 document.write(mystr);
15 /*
16 object HTMLParagraphElement HTML ， ， ，
17 ， object HTMLParagraphElement， ， innerHTML
18 ， ， 。
19 */
20 script>
21 body>
22 html> 1 DOCTYPE>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title>innerHTML title>
6
13 head>
14 <body>
15 <p id="con"> 4 p>
16 <p> js ， Uncaught TypeError: Cannot read property 'innerHTML' of nullp>
17
18 <p><img src="images/demo3-3-1.jpg" >p>
19 <p><img src="images/demo3-3-2.jpg" >p>
20 body>
21
22 <script type="text/javascript">
23 // Object.innerHTML//
24 var mycon=document.getElementById('con');
25 document.write('P :'+mycon.innerHTML+'
');
26 mycon.innerHTML=" ";
27 document.write('P :'+mycon.innerHTML+'
');
28 script>
29 html> 1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> HTML title>
6 <script type="text/javascript">
7 // Object.style.property=new style;
8 // Object ， document.getElementById("id") 。
9 // property
10 script>
11 head>
12 <body>
13 <p id="con">hello worldp>
14 <script type="text/javascript">
15 var mycon=document.getElementById('con');
16 mycon.style.color='#fff';
17 mycon.style.fontSize='18px';
18 mycon.style.backgroundColor='green';
19 script>
20 <p> （property）:p>
21 <img src="images/demo3-4-1.jpg" >
22 <img src="images/demo3-4-2.jpg" >
23 body>
24 html> 1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> （display ）title>
6 head>
7 <body>
8 <p id="ceshi"> Web ， 、 ，JavaScript 。p>
9 <script type="text/javascript">
10 // Object.style.display = value
11 var ceshi=document.getElementById('ceshi');
12 function ceshi1(){
13 ceshi.style.display='none';
14 }
15 function ceshi2(){
16 ceshi.style.display='block';
17 }
18 script>
19 <form action="" method="">
20 <input type="button" name="" id="" value=" " onclick="ceshi2()"/>
21 <input type="button" name="" id="" value=" " onclick="ceshi1()"/>
22 form>
23 <p>value :p>
24 <img src="images/demo3-5-1.jpg" >
25 <p> :p>
26 <img src="images/demo3-5-2.jpg" >
27 body>
28 html> 1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> （className ）title>
6 <script type="text/javascript">
7 /*object.className = classname
8 1. class
9 2. css */
10 script>
11 <style type="text/css">
12 .mychang{
13 color: #fff;
14 background-color: #f90;
15 height: 60px;
16 width: 80%;
17 line-height: 60px;
18 font-size: 16px;
19 }
20 .ceshi{
21 font-size: 18px;
22 color: #008000;
23 }
24 style>
25 head>
26 <body>
27 <p id="add"> JavaScript p>
28 <input type="button" name="" id="" value=" " onclick="myadd()"/>
29 <h3 id="change" class="one">JavaScript h3>
30 <input type="button" name="" id="" value=" " onclick="mychange()"/>
31 <script type="text/javascript">
32 function myadd(){
33 document.getElementById('add').className='ceshi'
34 }
35 function mychange(){
36 document.getElementById('change').className='mychang';
37 }
38 script>
39 body>
40 html> 1 DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <title> （className ） title>
6 <style type="text/css">
7 .one{
8 font-size: 14px;
9 width: 200px;
10 color: red;
11 }
12 .two{
13 font-size: 20px;
14 width: 400px;
15 color: green;
16 }
17 style>
18 head>
19 <body>
20 <p id="str" class="one"> , U p>
21 <form action="" method="">
22 <input type="button" name="" id="" value=" " onclick="modifyclass()"/>
23 form>
24 <script type="text/javascript">
25 var mystr=document.getElementById('str');
26 document.write('p class :'+mystr.className+'
')
27 function modifyclass(){
28 mystr.className='two'
29 }
30 script>
31 <p> :p>
32 <img src="images/demo3-6-1.jpg" >
33 <img src="images/demo3-6-2.jpg" >
34 body>
35 html> 1 DOCTYPE HTML>
2 <html>
3 <head>
4 <meta http-equiv="txttent-Type" txttent="text/html; charset=gb2312" />
5 <title>style title>
6 <style type="text/css">
7 *{ font-size:12px;}
8 #txt{
9 height:400px;
10 width:600px;
11 border:#333 solid 1px;
12 padding:5px;
13
14 }
15 p{
16 line-height:18px;
17 text-indent:2em;}
18 style>
19 head>
20 <body>
21 <h2 id="con">JavaScript H2>
22 <div id="txt">
23 <h5>JavaScript 。h5>
24 <p>1. JavaScript ， JS ， JS。p>
25 <p>2. JavaScript ， JS 、 、 、 、 、BOM 、DOM 。p>
26 <p>3. ， JavaScript 、 、 、 、cookie、 、ajax 。p>
27
28 div>
29 <form>
30 <input type="button" value=" " onClick="dcolor()">
31 <input type="button" value=" " onClick="dwh()">
32 <input type="button" value=" " onClick="dh()">
33 <input type="button" value=" " onClick="ds()">
34 <input type="button" value=" " onClick="dclear()">
35
36 form>
37 <script type="text/javascript">
38 function dcolor(){
39 var mychar = document.getElementById("txt");
40 mychar.style.color="red";
41 mychar.style.backgroundColor="#ccc";
42 }
43
44 function dwh(){
45 var mychar = document.getElementById("txt");
46 mychar.style.width="400px";
47 mychar.style.height="200px";
48 }
49
50 function dh(){
51 var mychar = document.getElementById("txt");
52 mychar.style.display="none";
53 }
54
55 function dclear(){
56 if(confirm(" ?")){
57 var mychar = document.getElementById("txt");
58 mychar.style.color="#000";
59 mychar.style.backgroundColor="#fff";
60 mychar.style.width="600px";
61 mychar.style.height="400px";
62 mychar.style.display="block";
63 }
64 }
65 function ds(){
66 var mychar = document.getElementById("txt");
67 mychar.style.display="block";
68 }
69 script>
70 body>
71
72 html>