![](https://img-blog.csdnimg.cn/20201014180756930.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
HTML
Tong XU
欣赏简洁的代码是一种赏心悦目的事情。
展开
-
默认div宽度和高度
默认情况下任何元素标签都是有宽度css样式的。一、认识div默认宽度div默认的宽度多少?答案:默认宽度为100%,父级宽度多少它宽度就多少。比如一个盒子宽度设置550px,里面一个div默认未设置宽度和未设置float,未设置padding等,在没有设置任何CSS属性情况下这个div宽度就是等于父级宽度550px。比如一个html布局中,body默认宽度是100%...原创 2020-02-12 11:34:45 · 11449 阅读 · 3 评论 -
svg标签如何获取宽度和高度
今天,在写一个vue+d3的项目,其中,要获取svg标签的width和height,但是尝试了网上很多方法,比如:其中,svg为已经得到的svg元素,let width = svg.style.width //失效let width = svg.offsetWidth //失效let width = svg.getBBox() //失效后面,在国外的网站上看到一个方法,...原创 2019-11-06 21:20:52 · 2639 阅读 · 1 评论 -
vue-router 动态路由匹配
我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个User组件,对于所有ID各不相同的用户,都要使用这个组件来渲染。那么,我们可以在router的路由路径中使用“动态路径参数”来达到这个效果:const User = { template: '<div>User {{ this.$route.params.id }}</div>',...原创 2019-11-02 15:36:08 · 577 阅读 · 0 评论 -
vue.js v-model深入理解
Vue.js中提供v-model的指令对表单元素进行双向数据绑定,在修改表单元素值的同时,实例vm中对应的属性值也同时更新,反之亦然。1. Text输入框示例,用户输入的内容和vm.message直接绑定:<input type="text" v-model="message" /><span>Your input is : {{ message }} &l...原创 2019-10-28 11:18:43 · 211 阅读 · 0 评论 -
Vue.js中Class与Style绑定
在开发过程中,我们经常会遇到动态添加类名或直接修改内联样式。class和style都是DOM元素的attribute,我们当然可以直接使用v-bind对这两个属性进行数据绑定,例如<p v-bind:style='style'></p>,然后通过修改vm.style的值对元素样式进行修改。但这样未免过于繁琐而且容易出错。1. Class绑定首先说明的是class属...原创 2019-10-27 17:24:17 · 206 阅读 · 0 评论 -
d3.json()的使用案例
在官网查看api时候,发现可以使用d3.json()读取json文件,于是自己写了一个小demo来测试这一api。进入D3Test文件夹以后:使用浏览器访问index.html文件:官网介绍:d3.json()只能从服务器上访问json文件,因此不能直接访问本地json文件。因此,使用node.js构建一个本地server。安装node.js参考其他博客http...原创 2019-10-23 11:26:26 · 8220 阅读 · 5 评论 -
CSS flex布局
博主以前经常使用的布局方式是盒子布局,通过父元素与子元素之间的相对positon关系来进行定义,随着应用的增大,会发现div越来越多,引起不适,所以我在这里要介绍CSS 3引入的一种新布局模式。CSS 3弹性盒子内容弹性盒子由弹性容器和弹性子元素组成。弹性容器通过设置display属性的值为flex将其定义为弹性容器。弹性容器内包含一个或多个弹性子元素。注意:弹性盒子只定义了弹...原创 2019-10-21 17:40:03 · 86 阅读 · 0 评论 -
JavaScript中事件对象的currentTarget,this和target属性
在事件处理程序内部,对象this始终等于currentTarget的值,而target则只包含事件的实际目标。如果直接将事件处理程序指定给了目标元素,则this,currentTarget和target包含相同的值。var btn = document.getElementById("myBtn");btn.onclick = function(event){ alert(eve...原创 2019-10-21 14:52:31 · 483 阅读 · 0 评论 -
JavaScript 数组的toString()与toLocaleString()方法的区别
所有对象都具有toLocaleString(),toString()和valueOf()方法。其中,调用数组的toString()方法会返回由数组中每个值的字符串形式拼接而成的一个以逗号分隔的字符串,valueOf()返回的还是数组,而toLocaleString()经常也返回与toString()和valueOf()方法相同的值,但也总不如此。var person1 = { to...原创 2019-10-18 14:13:49 · 397 阅读 · 0 评论 -
Javascript Boolean类型
Boolean类型是ECMAScript中使用最多的一种类型,该类型只有两个字面值:true和false。这两个值与数字值不是一回事,因此true不一定等于1,而false也不一定等于0。以下是为变量赋Boolean类型值的例子:var found = true;var lost = false;需要注意的是,Boolean类型的字面值true和false是区分大小写的。也就是说,...原创 2019-10-17 17:19:00 · 153 阅读 · 0 评论 -
HTML 添加新元素
可以向HTML添加新元素,并为该元素定义样式,元素名为<myHero>。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>菜鸟教程(runoob.com)</title> <script src="https://cd...原创 2019-10-12 11:48:06 · 302 阅读 · 0 评论 -
JavaScript HTML DOM集合
HTML Collection对象getElementsByTagName() 方法返回HTML Collection对象。HTMLCollection 对象类似包含 HTML 元素的一个数组。以下代码获取文档所有的<p>元素:var x = document.getElementsByTagName("p");HTML Length属性HTMLColle...原创 2019-10-10 15:00:55 · 69 阅读 · 0 评论 -
JavaScript HTML DOM EventListener
addEventListener()方法addEventListener()方法用于向指定元素添加事件句柄。addEventListener()方法添加的事件句柄不会覆盖已存在的事件句柄。可以向一个元素添加多个事件句柄。语法:element.addEventListener(event, function, useCapture);event:事件的类型;function...原创 2019-10-10 14:52:48 · 98 阅读 · 0 评论 -
JavaScript HTML DOM - 改变CSS
HTML DOM允许JavaScript改变HTML元素的样式。改变HTML样式:document.getElementById(id).style.property = 新样式;使用事件:HTML DOM 允许通过触发事件来执行代码。对事件做出反应:可以在事件发生时执行JavaScript。HTML事件属性:如需向HTML元素分配事件,可以使用事件属性。<...原创 2019-10-10 14:26:43 · 93 阅读 · 0 评论 -
HTML列表
HTML无序列表无序列表是一个项目的列表,此列项目使用粗体圆点进行标记。<ul> <li>Coffee</li> <li>Milk</li></ul>HTML有序列表有序列表是一列项目,列表项目使用数字进行标记。<ol> <li>Coffee</li> &l...原创 2019-10-03 10:30:57 · 74 阅读 · 0 评论 -
HTML中datalist标签
标签定义及使用说明:<datalist>标签规定了<input>元素可能的选项列表。<datalist>标签被用来在为<input>元素提供“自动完成”的特性。用户能看到一个下拉列表,里面的选项是预先定义好的,将作为用户的输入数据。<!DOCTYPE html><html> <head> &l...原创 2019-10-03 11:34:30 · 760 阅读 · 0 评论 -
JavaScript变量声明周期
局部JavaScript变量在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。只要函数运行完毕,本地变量就会被删除。全局JavaScript变量在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。Ja...原创 2019-10-03 20:26:33 · 347 阅读 · 0 评论 -
JavaScript中使用for和while循环遍历数组
For循环:<!DOCTYPE html><html><head><meta charset="utf-8"><title>菜鸟教程(runoob.com)</title></head><body><script>cars=["BMW","Volvo","Saab",...原创 2019-10-03 21:18:33 · 1319 阅读 · 0 评论 -
JavaScript中的null与undefined区别
null在 JavaScript 中 null 表示 "什么都没有"。null是一个只有一个值的特殊类型。表示一个空对象引用。 用 typeof 检测 null 返回是object。 你可以设置为 null 来清空对象:undefined在 JavaScript 中,undefined是一个没有设置值的变量。typeof一个没有值的变量会返回u...原创 2019-10-03 21:30:39 · 83 阅读 · 0 评论 -
JavaScript类型转换
Number()转换为数字,String()转换为字符串,Boolean()转换为布尔值。JavaScript数据类型:在JavaScript中有5中不同的数据类型:string number boolean object function3种对象类型:Date Object Array2个不包含任何值的数据类型:null undefined注意:Na...原创 2019-10-07 18:48:54 · 78 阅读 · 0 评论 -
JavaScript:void(0)含义
JavaScript:void(0)中最重要的是void关键字,该操作符指定要计算一个表达式但是不返回值。href="#"与href="javascript:void(0)"的区别:#包含一个位置信息,默认的锚是#top,也就是网页的上端。而javascript:void(0)仅仅表示一个死链接。<!DOCTYPE html><html> <h...原创 2019-10-10 09:34:40 · 253 阅读 · 1 评论 -
JavaScript代码规范
所有JavaScript项目适用于同一种规范。JavaScript代码规范:代码规范通常包括以下几个方面:变量和函数的命名规则; 空格、缩进、注释的使用规则; 其他常用的规范...规范的代码可以更易于阅读和维护。代码规范一般在开发前规定,可以根据你的团队成员来协商设置。变量名:推荐使用驼峰法来命名。空格与运算符:运算符前后需要添加空格。代码缩进:使用4个空格符...原创 2019-10-10 10:05:18 · 89 阅读 · 0 评论 -
JavaScript DOM简介
通过HTML DOM,可访问HTML文档的所有元素。查找HTML元素:通过id找到HTML元素; 通过标签名找到HTML元素; 通过类名找到HTML元素;通过id查找HTML元素:var x = document.getElementById("intro");如果找到该元素,则该方法将以对象的形式返回该元素;如果未找到该元素,则x将包含null。通过标签...原创 2019-10-10 11:52:10 · 62 阅读 · 0 评论 -
JavaScript HTML DOM - 改变HTML
HTML DOM 允许JavaScript改变HTML元素的内容。改变HTML输出流:在JavaScript中,document.write()可用于直接向HTML输出流写内容。绝不要在稳定加载完成之后使用document.write(),否则会覆盖文档。改变HTML内容:修改HTML内容的方法是使用innerHTML属性。document.getElementById...原创 2019-10-10 14:18:51 · 96 阅读 · 0 评论 -
HTML表格
HTML表格表格由<table>标签来定义。每个表格均有若干行(由<tr>标签来定义),每行被分割为若干单元格(由<td>标签来定义)。字母td指表格数据,即数据单元格的内容。HTML表格常用标签标签 描述 <th> 定义表格表头 <tr> 定义表格的行 <td> 定义表格的列...原创 2019-10-03 10:19:59 · 80 阅读 · 0 评论