通过JS动态的修改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标签.如下图:
<!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. createElement. ("标签的名称")
var div=document. createElement. ("div")
var div=document. createElement. ("p")
var div=document. createElement. ("span")
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中如何不断的重复执行某一段代码 ?
function test(){
console.log ("test")
} //每隔多少毫秒执行一次第一个参数(test函数)
setInterval(test, 1000) ;
var nm=1 ;
function test(){
console.log ("test")
}
setInterval(function (){
console.log ("test", num) ;
num++ ;
}, 1000) ;
//每执行一次匿名函数的代码块,就执行增量表达式num++.
通过JS动态的修改HTML元素的样式和增添标签元素等的更多相关文章
- JS动态添加Easyui的HTML时样式丢失
解决办法: $.parser.parse($("#creatLi").html(<li>xxxxxx</li>)); ------------------- ...
- js动态加载HTML元素时出现的无效的点击事件
项目中列表数据中隐藏着详情数据, 图一: 详情数据是:根据当前行的数据作为参数,通过ajax请求到后台返回的数据,再根据返回的结果动态生成HTML页面 图二: js文件中的这些js的点击事件无效: j ...
- html标签元素分类
元素分类 html中的标签元素大体分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <div>.<p>.<h1>...&l ...
- JS动态生成的元素，其对应的方法不响应（比如单击事件，鼠标移动事件等）
主要原因:在页面给元素注册点击事件的时候[ $(function () { XXX }); ],JS动态生成的元素还尚未生成,所以click事件就没有生效 解决方法: 方案一:js动态生成元素后再给 ...
- form表单 无法提交js动态添加的表单元素问题。。
第一种情况, 这种情况js动态添加的表单元素是不能提交到服务器端的 <table> <form method="post" action=" url ...
- 2）JS动态生成HTML元素的爬取
2)JS动态生成HTML元素的爬取 import java.util.List; import org.openqa.selenium.By; import org.openqa.selenium.W ...
- 微信小程序 JS动态修改样式
微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...
- jquery on() bind()绑定的点击事件在js动态新添加的元素生效
方法一:$('.class').on("click",function(){……}); 相当于 $('.class').bind("click",functio ...
- JS动态修改微信浏览器中的title
JS动态修改微信浏览器中的title我们的原理是设置一个ifame然后我们再加载一下就可以实现了,具体的例子如下所示． 平时使用JS修改title,直接document.title=新标题就好了 这样 ...
随机推荐
- springbatch的封装与使用
springbatch 主要实现批量数据的处理,我对batch进行的封装,提出了jobBase类型,具体job需要实现它即可.Spring Batch 不仅提供了统一的读写接口.丰富的任务处理方式.灵 ...
- 直观理解神经网络最后一层全连接+Softmax
目录 写在前面 全连接层与Softmax回顾 加权角度 模板匹配 几何角度 Softmax的作用 总结 参考 博客:blog.shinelee.me | 博客园 | CSDN 写在前面 这篇文章将从3 ...
- COW奶牛！Copy On Write机制了解一下
前言 只有光头才能变强 在读<Redis设计与实现>关于哈希表扩容的时候,发现这么一段话: 执行BGSAVE命令或者BGREWRITEAOF命令的过程中,Redis需要创建当前服务器进程的 ...
- Docker最全教程之使用Docker搭建Java开发环境（十七）
前言 Java是一门面向对象的优秀编程语言,市场占有率极高,但是在容器化实践过程中,发现官方支持并不友好,同时与其他编程语言的基础镜像相比(具体见各语言镜像比较),确实是非常臃肿. 本篇仅作探索,希望 ...
- 关于数据库管理系统DBMS--关系型数据库（MySQL/MariaDB）
数据库的结构(3种):层次,网状,关系型(用的最多): DBMS的三层模型: 视图层:面向最终用户: 逻辑层:面向程序员或DBA: 物理层:面向系统管理员: 关系型数据库管理系统——RDBMS: 主要 ...
- 关于bootstrap报错
在使用bootstrap报错.报错的位置如下 if("undefined"==typeof jQuery)throw new Error("Bootstrap's Jav ...
- PowerDesigner如何连接数据库--odbc连接数据库用法
先下载msi https://dev.mysql.com/downloads/connector/odbc/ 注:如果不成功,有可能msi版本问题,可以更换一下msi 前期准备 双击odbc的ms ...
- SpringBoot2.0之七 实现页面和后台代码的热部署
开发过程中我可能经常会因为修改一点点代码就需要重启项目而烦恼,这样不仅很繁琐,还会因为不断重启浪费大量的时间,无法提高工作效率.可是现在SpringBoot为我们提供了非常简单的方式让我们实现热部署. ...
- python word转pdf
原理 使用python win32 库 调用word底层vba,将word转成pdf 安装pywin32 pip install pywin32 python代码 from win32com.clie ...
- ASP.NET Aries 高级开发教程：Excel导入之代码编写（番外篇）
前言: 以许框架提供的导入配置功能,已经能解决95%以上的导入情况,但有些情况总归还是得代码来解决. 本篇介绍与导入相关的代码. 1.前端追加导入时Post的参数: var grid = new AR ...