一. 通过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++.
 
 

通过JS动态的修改HTML元素的样式和增添标签元素等的更多相关文章

  1. JS动态添加Easyui的HTML时样式丢失

    解决办法: $.parser.parse($("#creatLi").html(<li>xxxxxx</li>)); ------------------- ...

  2. js动态加载HTML元素时出现的无效的点击事件

    项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...

  3. html标签元素分类

    元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...

  4. JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）

    主要原因:在页面给元素注册点击事件的时候[ $(function () {  XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...

  5. form表单 无法提交js动态添加的表单元素问题。。

    第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url   ...

  6. 2）JS动态生成HTML元素的爬取

    2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...

  7. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  8. jquery on() bind()绑定的点击事件在js动态新添加的元素生效

    方法一:$('.class').on("click",function(){……}); 相当于 $('.class').bind("click",functio ...

  9. JS动态修改微信浏览器中的title

    JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...

随机推荐

  1. sau交流学习社区第三方登陆github--oauth来实现用户登录

    sau交流学习社区第三方登陆github--oauth来实现用户登录 最近在丰富nodejsBlog开发的“交流学习社区”(https://www.mwcxs.top)的其他功能以及修复一些bug. ...

  2. [翻译 EF Core in Action 1.10] 应该在项目中使用EF Core吗?

    Entity Framework Core in Action Entityframework Core in action是 Jon P smith 所著的关于Entityframework Cor ...

  3. Web前后端分离

    第一篇博客:见谅 用自己的通俗语言讲web工程的前后端分离: 只是从自己的角度去分析,我眼中的前后端分离(可能不对) 首先要明白我们服务器和浏览器之前传输和接受的是什么: 静态文件(html,css, ...

  4. Odoo：全球第一免费开源ERP权威性能测试报告完整版（绝对珍藏）

    Odoo平台简介 Odoo(以前叫OpenERP)是世界排名第一的开源ERP系统,最早由比利时一家公司开发,经过十几年发展,目前全世界Odoo的使用者超过2百万人,Odoo被翻译成几十种语言,Odoo ...

  5. 利用MAT玩转JVM内存分析（一）

    本文首发于公众号:javaadu 尽管JVM提供了自动内存管理的机制,试图降低程序员的开发门槛,确实也实现了这一目标,在日常开发中,我们一般都不需要关心对象的内存释放.JVM大部分都是使用trace算 ...

  6. 在Hyper-V上安装RemixOS 的Android模拟器

    不想用实体机,想不想弄个快速的Android虚拟环境,今天我们就来说说把Android模拟器(RemixOS)安到Hyper-v上的办法. 1. 下载RemixOs  或者直接去 论坛获得下载地址 2 ...

  7. [ gczdac ] 20190306 访者必阅

    1.我的私人博客!!! 2.博主还处于入门学习阶段,并且非常玻璃心 3. 激烈讨论√  人身攻击× 4. 欢迎指正错误,相互学习 5. 很少在线,无法及时回复请谅解 https://www.cnblo ...

  8. git工具使用说明

    一.什么是git?     Git是分布式版本控制系统      概念: 工作区:就是你在电脑里能看到的目录: 暂存区:一般存放在(.git/index)中,所以我们把暂存区有时也叫作索引(index ...

  9. 缓存穿透，缓存雪崩，热点key及解决办法

    1.穿透 穿透:频繁查询一个不存在的数据,由于缓存不命中,每次都要查询持久层.从而失去缓存的意义. 解决办法: 持久层查询不到就缓存空结果,查询时先判断缓存中是否exists(key) ,如果有直接返 ...

  10. Socket模拟HTTP请求

    WEB服务器可以可以理解为socket的上层封装,其也是TCP/IP协议,只要知道其IP地址和端口号就可以与他进行通信了 与WEB服务器数据交互,其重点在于请求头,如果请求头不对则不能进行数据传输 简 ...