如何用JavaScript去操作HTML元素和CSS样式

第3章你也有控制权（DOM操作）

如何用JavaScript去操作HTML元素和CSS样式，实现简单的动态操作。

3-1 认识DOM
3-2 通过ID获取元素
3-3 innerHTML 属性
3-4 改变 HTML 样式
3-5 显示和隐藏（display属性）
3-6 控制类名（className 属性）

第4章编程挑战

不断实践，提高技能。

4-1 编程挑战

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>认识DOM</title>
 6     </head>
 7     <body>
 8         <p>HTML文档可以说由节点构成的集合，三种常见的DOM节点:</p>
 9         <ol>
10             <li>元素节点：&lt;html&gt;、&lt;body&gt;、&lt;p&gt;等都是元素节点，即标签。如图一</li>
11             <li>文本节点:向用户展示的内容，如&lt;li&gt;...&lt;/li&gt;中的JavaScript、DOM、CSS等文本。</li>
12             <li>属性节点:元素属性，如&lt;a&gt;标签的链接属性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>hello</h3>
 9         <p id=‘con‘>i love javascript</p>
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 <!--         <script type="text/javascript">
 7             // Object.innerHTML//语法
 8             var mycon=document.getElementById(‘con‘);
 9             document.write(‘P标签原始内容:‘+mycon.innerHTML+‘<br >‘);
10             mycon.innerHTML="今天阳光明媚";
11             document.write(‘P标签现在内容:‘+mycon.innerHTML+‘<br >‘);
12         </script> -->
13     </head>
14     <body>
15         <p id="con">你好4月份</p>
16         <p>当js写在这个头部，报错Uncaught TypeError: Cannot read property ‘innerHTML‘ of null</p>
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+‘<br >‘);
26         mycon.innerHTML="今天阳光明媚";
27         document.write(‘P标签现在内容:‘+mycon.innerHTML+‘<br >‘);
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 world</p>
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+‘<br />‘)
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>

原文地址：https://www.cnblogs.com/dhnblog/p/12677060.html

时间： 2024-10-23 21:30:50

如何用JavaScript去操作HTML元素和CSS样式的相关文章

js改变元素的class来实现改变元素的CSS样式

<!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"> <head> <meta http-equiv="Content-

我们在写页面的时候,可能总是不知道怎么回事,就发现某个元素出现了问题,但是不知道为什么会这样,这时候,就需要使用强大的chrome了!!! 举例说明: 1. 我们希望看到博客园这张图片的具体信息.就可以打开chrome的开发者工具,点击箭头后选中该图片,这时代码就自动定位到了该元素的HTML代码,如下图所示: 这个页面中,右上方的蓝色阴影下即为图片元素所在的HTML代码,而开发者工具的左下方就是该元素的css样式代码: 其中最上面的是行内样式, 往下有我们对其进行直接的样式设置的代码: 往下有从

每天一个JavaScript实例-展示设置和获取CSS样式设置

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-展示设置和获取CSS样式设置</title> <style> #date{ width:200px; background-color:l

获取元素的CSS样式属性值 IE兼容写法

/** * 获取元素的CSS样式属性值 */function css(element, attrName) { /*if (window.getComputedStyle) return window.getComputedStyle(element)[attrName] return element.currentStyle[attrName];*/ return window.getComputedStyle ? getComputedStyle(element)[attrName]: el

javascript操作元素的css样式

我们经常要使用Javascript来改变页面元素的样式.当中一种办法是改变页面元素的CSS类(Class),这在传统的Javascript里,我们一般是通过处理HTML Dom的classname特性来实现的:而jQuery里提供三种方法来实现这个功能,尽管它们和传统方法的思想相通,可是却节省了很多代码.还是那句话 - "jQuery让JavaScript代码变得简洁!" 1. addClass() - 加入?CSS类 $("#target").addClass(&

使用jquery操作元素的css样式（获取、修改等等）

//1.获取和设置样式 $("#tow").attr("class")获取ID为tow的class属性 $("#two").attr("class","divClass")设置Id为two的class属性. //2.追加样式 $("#two").addClass("divClass2")为ID为two的对象追加样式divClass2 //3.移除样式 $("

对于用js获取元素的css样式属性(getComputedStyle,currentStyle,style)(getPropertyValue,getAttribute)

首先单独拎出来讲的是style style: nodeObject.style.cssProperty获取的是DOM节点上 style 属性定义的样式,如果不存在 style 属性,或者 style 属性没有定义相应的样式,则是无法获取的.也就是说,JavaScript 不会到 <style> 标签或者 CSS 文件去获取相应的样式,只能获取 style 属性定义的样式. 就是外部样式表,内部样式表,用style都是无效的,只有内联样式是有效的,当然用style写入也是写入在内联样式的. 然后

HTML控件元素和css样式基础理解

HTML (超文本标记语言) 1.该语言用于编写超文本文档,并在含有浏览器软件的设备上显示,超文本文档指集视频.音频.超链接.文本.图像.图片等多媒体信息为一体的文档. 标签元素(控件元素) 1.标签分为行内标签和块级标签,行内标签有small(文本字体小化). big(文本字体大化). address(文本地址样式化) .img(加载图片元素) .a(加载链接)等等. 块级标签有div(块级元素).ul(列表父元素).li(列表子元素) .p(文本)等等.区别就在浏览器中的呈现效果. 2.每

drupal7 formAPI给元素加css样式

比如,我定义了一个表单元素,名字叫做包库开始日期, $form['starttime_baoyue']=array( '#type'=>'textfield', '#title'=>t('包库开始日期'), '#required' => TRUE, ); 如代码所示,除了drupal默认加的一些css样式外,没有任何样式了,如下图: 那么,实际工作当中,前端给了一个样式表,有定好的样式,那么怎么给这个元素加上呢? 其实很简单:只需要加一句代码: '#attributes'=>arr

如何用JavaScript去操作HTML元素和CSS样式

第3章 你也有控制权（DOM操作）

第4章 编程挑战

如何用JavaScript去操作HTML元素和CSS样式的相关文章

第3章你也有控制权（DOM操作）

第4章编程挑战