安科网

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

dazhifu

dazhifu

2020-04-10

关注 关注

第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 编程挑战
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>认识DOM</title>
    </head>
    <body>
        <p>HTML文档可以说由节点构成的集合，三种常见的DOM节点:</p>
        <ol>
            <li>元素节点：&lt;html&gt;、&lt;body&gt;、&lt;p&gt;等都是元素节点，即标签。如图一</li>
            <li>文本节点:向用户展示的内容，如&lt;li&gt;...&lt;/li&gt;中的JavaScript、DOM、CSS等文本。</li>
            <li>属性节点:元素属性，如&lt;a&gt;标签的链接属性href="http://www.dhnblog.com/"。如图二</li>
        </ol>
        <p><img src="images/demo3-1-1.jpg" title="图一"></p>
        <p><img src="images/demo3-1-2.jpg" title="图二"></p>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>通过ID获取元素</title>
    </head>
    <body>
        <h3>hello</h3>
        <p id=‘con‘>i love javascript</p>
        <p> JavaScript是一种基于对象、事件驱动的简单脚本语言，嵌入在HTML文档中，由浏览器负责解释和执行，在网页上产生动态的显示效果并实现与用户交互功能。</p>
        <script>
             // document.getElementById("id") 
             var mystr=document.getElementById(‘con‘);
             document.write(mystr);
             /*
             object HTMLParagraphElement 对象 HTML段落元素，获取到的是元素，这个元素也就是对象，
             获取到的对象不会显示里面的值，所以显示object HTMLParagraphElement，想要抽取出里面的值，就用 innerHTML 获取
             获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。
             */
        </script>
    </body>
</html>
<!DOCTYPE>
<html>
    <head>
        <meta charset="utf-8">
        <title>innerHTML 属性</title>
<!--         <script type="text/javascript">
            // Object.innerHTML//语法
            var mycon=document.getElementById(‘con‘);
            document.write(‘P标签原始内容:‘+mycon.innerHTML+‘<br >‘);
            mycon.innerHTML="今天阳光明媚";
            document.write(‘P标签现在内容:‘+mycon.innerHTML+‘<br >‘);
        </script> -->
    </head>
    <body>
        <p id="con">你好4月份</p>
        <p>当js写在这个头部，报错Uncaught TypeError: Cannot read property ‘innerHTML‘ of null</p>
        <!-- 浏览器截图效果展示 -->
        <p><img src="images/demo3-3-1.jpg" ></p>
        <p><img src="images/demo3-3-2.jpg" ></p>
    </body>
    
    <script type="text/javascript">
        // Object.innerHTML//语法
        var mycon=document.getElementById(‘con‘);
        document.write(‘P标签原始内容:‘+mycon.innerHTML+‘<br >‘);
        mycon.innerHTML="今天阳光明媚";
        document.write(‘P标签现在内容:‘+mycon.innerHTML+‘<br >‘);
    </script>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>改变 HTML 样式</title>
        <script type="text/javascript">
            // Object.style.property=new style;
            // Object是获取的元素对象，如通过document.getElementById("id")获取的元素。
            // property属性
        </script>
    </head>
    <body>
        <p id="con">hello world</p>
        <script type="text/javascript">
            var mycon=document.getElementById(‘con‘);
            mycon.style.color=‘#fff‘;
            mycon.style.fontSize=‘18px‘;
            mycon.style.backgroundColor=‘green‘;
        </script>
        <p>基本属性表（property）:</p>
        <img src="images/demo3-4-1.jpg" >
        <img src="images/demo3-4-2.jpg" >
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>显示和隐藏（display属性）</title>
    </head>
    <body>
        <p id="ceshi">做为一个Web开发师来说，如果你想提供漂亮的网页、令用户满意的上网体验，JavaScript是必不可少的工具。</p>
        <script type="text/javascript">
            // Object.style.display = value
            var ceshi=document.getElementById(‘ceshi‘);
            function ceshi1(){
                ceshi.style.display=‘none‘;
            }
            function ceshi2(){
                ceshi.style.display=‘block‘;
            }
        </script>
    <form action="" method="">
        <input type="button" name="" id="" value="显示内容" onclick="ceshi2()"/>
        <input type="button" name="" id="" value="隐藏内容" onclick="ceshi1()"/>
    </form>
    <p>value取值:</p>
    <img src="images/demo3-5-1.jpg" >
    <p>代码展示:</p>
    <img src="images/demo3-5-2.jpg" >
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>控制类名（className 属性）</title>
        <script type="text/javascript">
            /*object.className = classname
            1.获取元素的class 属性
            2. 为网页内的某个元素指定一个css样式来更改该元素的外观*/
        </script>
        <style type="text/css">
            .mychang{
                color: #fff;
                background-color: #f90;
                height: 60px;
                width: 80%;
                line-height: 60px;
                font-size: 16px;
            }
            .ceshi{
                font-size: 18px;
                color: #008000;
            }
        </style>
    </head>
    <body>
        <p id="add"> JavaScript使网页显示动态效果并实现与用户交互功能</p>
        <input type="button" name="" id="" value="添加样式" onclick="myadd()"/>
        <h3 id="change" class="one">JavaScript使网页显示动态效果并实现与用户交互功能</h3>
        <input type="button" name="" id="" value="更改外观" onclick="mychange()"/>
        <script type="text/javascript">
            function myadd(){
                document.getElementById(‘add‘).className=‘ceshi‘
            }
            function mychange(){
                document.getElementById(‘change‘).className=‘mychang‘;
            }
        </script>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>控制类名（className 属性）补充</title>
        <style type="text/css">
            .one{
                font-size: 14px;
                width: 200px;
                color: red;
            }
            .two{
                font-size: 20px;
                width: 400px;
                color: green;
            }
        </style>
    </head>
    <body>
        <p id="str" class="one">郁闷,又丢了U盘</p>
        <form action="" method="">
            <input type="button" name="" id="" value="点击更改" onclick="modifyclass()"/>
        </form>
        <script type="text/javascript">
            var mystr=document.getElementById(‘str‘);
            document.write(‘p元素的class值为:‘+mystr.className+‘<br />‘)
            function modifyclass(){
                mystr.className=‘two‘
            }
        </script>
        <p>代码展示:</p>
        <img src="images/demo3-6-1.jpg" >
        <img src="images/demo3-6-2.jpg" >
    </body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="txttent-Type" txttent="text/html; charset=gb2312" />
<title>style样式</title>
<style type="text/css">
*{ font-size:12px;}
#txt{
    height:400px;
    width:600px;
    border:#333 solid 1px;
    padding:5px;
    
    }
p{
    line-height:18px;
    text-indent:2em;}
</style>
</head>
<body>
  <h2 id="con">JavaScript课程</H2>
  <div id="txt"> 
   <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
  <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p>
   <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p>
   <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p>
  
  </div>
  <form>
  <input type="button" value="改变颜色" onClick="dcolor()">
  <input type="button" value="改变宽高" onClick="dwh()">
  <input type="button" value="隐藏内容" onClick="dh()">
  <input type="button" value="显示内容" onClick="ds()">
  <input type="button" value="恢复" onClick="dclear()">
  
  </form>
  <script type="text/javascript">
function dcolor(){
     var mychar = document.getElementById("txt");  
     mychar.style.color="red";
     mychar.style.backgroundColor="#ccc";
    }
   
function dwh(){
     var mychar = document.getElementById("txt");  
     mychar.style.width="400px";
     mychar.style.height="200px";
    }

function dh(){
     var mychar = document.getElementById("txt");  
     mychar.style.display="none";
    }

function dclear(){
    if(confirm("确定要取消设置吗?")){
     var mychar = document.getElementById("txt");  
     mychar.style.color="#000";
     mychar.style.backgroundColor="#fff";
     mychar.style.width="600px";
     mychar.style.height="400px";
     mychar.style.display="block";
    }
    }
function ds(){
     var mychar = document.getElementById("txt");  
     mychar.style.display="block";
    }
  </script>
</body>

</html>

javascript css样式 css

dazhifu

dazhifu

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

原生JavaScript实现五子棋游戏

tips = "白棋胜利";

PeterLuoz 2020-11-09

如何将Node.js中的回调转换为Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

nmgxzm00 2020-11-10

NodeJS开发人员常见五个错误理解

Nodejs 诞生于 2009 年，由于它使用了 JavaScript ，在这些年里获得了非常广泛的流行。它是一个用于编写服务器端应用程序的 JavaScript 运行时，但是 "它就是JavaScript" 这句话并不是 100% 正

ifconfig 2020-10-14

JavaScript枚举选择jquery插件代码实例

聪明的朋友马上想出办法：用两个选项为周一到周日的下拉列表实现，对 那样可以，但是我觉得不够友好，所以利用业余时间写下了这个jQuery小插件。weeks: [{ text: '一', value: 2 }, { text: '二', value: 3 },

hhanbj 2020-11-17

详解JavaScript原型与原型链

正如一些面向对象语言中所实现的那样，在JavaScript中我们有时也需要创建一个拥有公共函数与属性的类作为父类来减少代码重复、实现类型检查与实现更加清晰地代码结构。在JavaScript中，继承是通过原型链实现的。了解JavaScript的继承与原型链之

zfszhangyuan 2020-11-16

详解JavaScript执行模型

JavaScript是一个单线程异步非阻塞并发语言，这些语言效果通过一个调用栈、一个事件循环、一个回调队列有些时候也叫任务队列与跟运行环境相关的API组成。调用栈是一个LIFO后进先出数据结构的函数运行栈，它内部的数据结构为函数帧。调用栈有一个意外情况，当

古叶峰 2020-11-16

4个下一个JavaScript项目的有趣API

术语API是首字母缩写词，代表“应用程序编程接口”。同样，一个API也列出了一堆开发者可以使用的操作，以及对这些操作的描述。API使开发人员可以利用平台的实现来执行一些有用的任务，从而节省时间。这也有助于减少开发人员需要为其程序编写的代码行数，因为API使

一个智障 2020-11-15

JavaScript是如何成为一门严肃的编程语言的

从最开始作为一种使网站变得漂亮的方式，JavaScript 已转变为一种严肃的编程语言。JavaScript 的卑微起步始于 1995 年，是由当时在 Netscape 通信公司工作的 Brendan Eich在短短 10 天内创建的。在其早期，JavaS

jipengx 2020-11-12

7个 jQuery上手项目，Github超千人star

jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功

81427005 2020-11-11

把 Node.js 中的回调转换为 Promise

在几年前，回调是 JavaScript 中实现执行异步代码的唯一方法。回调本身几乎没有什么问题，最值得注意的是“回调地狱”。在 ES6 中引入了 Promise 作为这些问题的解决方案。最后通过引入 async/await 关键字来提供更好的体验并提高了可

xixixi 2020-11-11

2021适合移动和桌面应用的JavaScript框架是什么

当听到JavaScript这个词的时候，“web开发”会一下子出现在我们的脑海中，因为JavaScript在很长一段时间里一直是web应用开发最广泛使用的语言，Angular、React和Vue等框架目前也很有名。尽管JavaScript主导着web开发领

游走的豚鼠君 2020-11-10

一篇文章带你了解JavaScript属性

属性是一个JavaScript对象关联的值。一个JavaScript对象是一个无序的性质集合，属性通常可以更改、添加和删除，但有些只读。//复制上面代码,替换不同语句，实现功能。delete 关键字不删除继承的属性，但如果删除原型属性，则会影响从原型继承的

苗疆三刀的随手记 2020-11-10

16个你可能不知道的JavaScript调试技巧

对于调试JavaScript，当然是越快越好，我们在这里列举了一些如何更加快速高效调试JS的重要窍门。熟悉了解工具对于完成任务来说有着重要的作用。我们在这里列举了16个你可能不知道的调试技巧，但它们可能是你想要在下次调试JavaScript代码之前记住的。

Web卓不凡 2020-11-03

重学JavaScript第1集｜变量提升

变量提升就好比JavaScript引擎用一个很小的代码起重机将所有var声明和function函数声明都举起到所属作用域的最高处。这句话的意思是：如果在函数体外定义函数或使用var声明变量。在上述代码中，第一行迪马以及show函数中的第一行代码分别是在变量

小飞侠V 2020-11-02

详解JavaScript引擎的相关概念和工作原理

此类标准定义了JavaScript引擎的工作机制和所有功能。因此，JavaScript引擎是一个程序，它可以帮助您将JavaScript代码转换为较低级别的机器代码。总的说来，诸如JavaScript和FORTRAN等高级语言都是从机器语言中抽象出来的。与

帕尼尼 2020-10-30

使用Chrome开发者工具研究JavaScript函数的原生实现原理

As the size of my blogChrome Development Tool tips used in my daily workturns to be larger I create a separate post to record do

爱读书的旅行者 2020-10-26

你应该知道的ES2020中Javascript10个新功能

好消息 - ES2020 新功能已经落地！这就意味着，现在对 ES2020 中 Javascript 的新增和改进要有一个完整的了解。让我们来看看都有哪些改变。它允许开发者在 JS 中使用更大的整数进行数据处理。之前，Javascript 中最大的整数是

帕尼尼 2020-10-23

2020年想成为前端开发工程师，这个学习路线收藏起来

近两年来，前端开发工程师越来越火了，薪资待遇也快接近后端开发工程师了。今天来给大家讲讲，在2020年，我们学习前端开发，应该学什么？正所谓万丈高楼平地起，我们不管是学任何一个技术，都是要从零基础开始的，学习前端开发也是同样的。CSS就是层叠样式表。使用CS

杏仁技术站 2020-10-23

一篇文章深入JavaScript运作原理？

您是否知道简单的JavaScript语句需要大量工作才能完成?浏览器仅理解0和1s语言，即二进制/位格式的语句。我们无法轻松地将整个JavaScript转换为位。现在，浏览器可以理解该机器代码并相应地运行。这是一些JS引擎示例。这是JavaScript引擎

淼寒儿 2020-10-22

JavaScript 中如何判断变量是否为数字

文本已经过 David Atanda 授权翻译。JavaScript 是一种动态类型语言，这意味着解释器在运行时确定变量的类型。当我们期望一个变量是数字时，对字符串或数组进行操作可能会在代码中导致奇怪的结果。在本文中，我们将会介绍一些判断变量是否为数字的

佐杰 2020-10-22
dazhifu

dazhifu

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号