文档章节

通过JS动态的修改HTML元素的样式和增添标签元素等

o
 osc_fmg49rzg
发布于 2019/03/20 14:07
字数 919
阅读 17
收藏 0

精选30+云产品,助力企业轻松上云!>>>

一. 通过JS动态的修改HTML元素的样式
 
1. 要想在js中动态的修改HTML元素的样式,首先需要写document,
   document我们称之为文档对象,这个对象中保存了当前网页中所有的HTML标签
  代码写法如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>51-自定义原型对象</title>
</head>
<body>
<div class="box" id="father">123</div>
<div class="box" id="son">456</div>
<script>
    console.log(document);
  
</body>
</html>

2.上面的代码执行后,可以在浏览器控制台console里发现document文档对象如下图: 

3.展开document文档对象,我们可以发现包含了当前网页中所有的HTML标签.如下图: 

二. 在<script>标签里定义对象,
 把document.querySelector("#son"); 赋值给div ; 格式:   div=document.querySelector("需要选择的标签名称");
 也就是说在document文档对象后写querySelector来选择一个id叫做son 的 div盒子 赋给变量div
 选择了id选择器后,便可以对这个ID对应 的<div>盒子修改它的样式
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>51-自定义原型对象</title>
</head>
<body>
<div class="box" id="father">123</div>
<div class="box" id="son">456</div>
<script>
    //1.通过js代码动态的找到HTML标签
    //document我们称之为文档对象,这个对象中保存了当前网页中所有的HTML标签
   //2.如何通过JS动态的修改HTML元素的样式
    var div=document.querySelector("#son");
    console.log(div);
    div.style.width="200px";
    div.style.height="200px";
    div.style.backgroundColor="red";
    div.style.borderRadius="50%";
</script>
</body>
</html>
 
三.如何动图的创建一个HTML元素,
方法基本如上,
只是document后的querySelector改为createElement. 
//如何动态的创建一个HTML元素
//格式: document. createElement. ("标签的名称")
var div=document. createElement. ("div")
var div=document. createElement. ("p")
var div=document. createElement. ("span")
 
四.如何动态创建的元素添加到另一个元素中
    1. 比如需要在<div>盒子标签里创建<p>标签
 
   1.1 首先选择需要创建元素或者标签的标签div, 然后在调用赋值给对象div.
        格式:  var div=document.querySelector("div");
 
   1.2  然后创建p标签,并赋值给对象p
        格式: var p=document.createElement("p");
 
   1.3 然后把创建的<p>标签传入到调用的元素<div>标签里.
        格式: 元素对象.appendChild(元素对象)
        代码:  div. appendChild(p);
 代码如下所示:
var div=document.querySelector("div");
var p=document.createElement("p");
div. appendChild(p);
 
五.如何删除一个指定元素或标签
代码如下:
// 如何删除一个指定元素
var div=document.querySelector("div>a");
   console.log(a) ;

// 通过访问一个元素对象的parentElement, 可以找到当前元素对象的父元素(父节点)
   console.log(a. parentElement) ;

//通过一个元素的父元素调用removeChild方法, 就可以讲该父元素中指定的子元素删除
a. parentElement. removeChild(a) ;
六. 在js中如何不断的重复执行某一段代码?
 1.方法一:
    代码如下图:
    注释:  图中代码里的seInterval(test, 1000);括号里的第一个参数test参数是被执行的函数test;
    第二个参数是毫秒,也就是需要隔多少时间执行一次.
//在js中如何不断的重复执行某一段代码 ?
function test(){
            console.log ("test")
}

//每隔多少毫秒执行一次第一个参数(test函数)
setInterval(test, 1000) ;
2.方法二:
在企业开发中常用的方法: 给seInterval传一个匿名函数,然后每隔1000毫秒执行一下匿名函数,
代码如下:
var nm=1 ;

function test(){
            console.log ("test")
}


setInterval(function (){
            console.log ("test", num) ;
             num++ ;
}, 1000) ;
//每执行一次匿名函数的代码块,就执行增量表达式num++.

 

 
 

 

 

 

 

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

如何防止单击按钮时对话框关闭 - How to prevent a dialog from closing when a button is clicked

问题: I have a dialog with EditText for input. 我有一个使用EditText输入的对话框。 When I click the "yes" button on dialog, it will validate the input and then close the dialog.......

富含淀粉
21分钟前
7
0
访问者模式Visitor

一 概述 场景:通常来说,用于封装数据所用到的pojo类,其只包含get、set,对应的业务逻辑是在Service上完成的;但如果出现多个pojo类都共用一套逻辑时,则应该考虑将逻辑进行抽象,不同类型...

小明不觉小
45分钟前
5
0
jQuery Ajax错误处理,显示自定义异常消息 - jQuery Ajax error handling, show custom exception messages

问题: Is there some way I can show custom exception messages as an alert in my jQuery AJAX error message? 有没有什么方法可以在我的jQuery AJAX错误消息中显示自定义异常消息作为警报...

法国红酒甜
51分钟前
28
0
告别传统机房:3D 机房数据可视化实现智能化与VR技术的新碰撞

前言 随着各行业对计算机依赖性的日益提高,计算机信息系统的发展使得作为其网络设备、主机服务器、数据存储设备、网络安全设备等核心设备存放地的计算机机房日益显现出它的重要地位,而机房...

xhload3d
昨天
51
0
spring源码解析-xml配置文件读取

整个 XML配置文件读取的大致流程如下: 通过继承自AbstractBeanDefinitionReader中的方法,来使用ResourLoader将资源文件路径转换为对应的Resource文件(读取资源文件并将其转为Resource) ...

wc_飞豆
昨天
22
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部