HTML + CSS + JS
文章平均质量分 88
HTML+CSS+JS系列
世界尽头与你
一个懂安全的开发者
展开
-
JS JSON基本教程
如果你需要存储 Date 对象,需要将其转换为字符串。方法将 JavaScript 对象转换为字符串。方法将数据转换为 JavaScript 对象。之后再将字符串转换为 Date 对象。JSON 不能存储 Date 对象。原创 2022-10-07 21:32:45 · 2685 阅读 · 0 评论 -
JS document对象详解
document对象其实是window对象下的一个子对象,它操作的是HTML文档里所有的内容。实际上,浏览器每次打开一个窗口,就会为这个窗口生成一个window对象,并且会为这个窗口内部的页面(即HTML文档)自动生成一个document对象,这样我们就可以通过document对象来操作页面中所有的元素了window是浏览器为每个窗口创建的对象。通过window对象,我们可以操作窗口,如打开窗口、关闭窗口、浏览器版本等,这些操作又被统称为“BOM(浏览器对象模型)”原创 2024-02-02 10:42:50 · 2333 阅读 · 0 评论 -
JS window对象详解
对于window对象,无论是它的属性,还是方法,都可以省略window前缀。如window.alert()可以简写为alert(),window.open()可以简写为open(),甚至window.document.getElementById()可以简写为document.getElementById(),以此类推。在JavaScript中,窗口常见的操作有两种:一种是“打开窗口”,另一种是“关闭窗口”。在线时钟中,秒针每隔一秒转一次。输入内容,然后点击对话框中的【确定】按钮,就会返回刚刚输入的文本。原创 2022-10-07 20:42:08 · 5639 阅读 · 0 评论 -
JS精髓中的精髓,事件进阶使用
每次调用一个事件的时候,JavaScript都会默认给这个事件函数加上一个隐藏的参数,这个参数就是event对象。只可以解除“事件监听器”添加的事件,不可以解除“事件处理器”添加的事件。在事件操作中,可以这样理解:哪个DOM对象(元素节点)调用了this所在的函数,那么this指向的就是哪个DOM对象。如果我们要给元素添加一个事件,一般会通过操作HTML属性的方式来实现,这种方式其实也叫作“事件处理器”当一个事件发生的时候,这个事件有关的详细信息都会临时保存到一个指定的地方,这个地方就是。原创 2022-10-07 17:50:05 · 714 阅读 · 0 评论 -
JS的精髓,事件详解
在这个例子中,浏览器从上到下解析到window.onload时,就会先不解析window.onload里面的代码,而是继续往下解析,直到把整个HTML文档解析完后才会回去执行window.onload里面的代码。在这个例子中,我们使用div元素模拟出一个按钮,并且为它添加了单击事件。选取文本后点击鼠标右键,【复制】这个选项还可以点击,但实际上,点击【复制】选项后再粘贴,是粘贴不出内容来的。实际开发中,我们在使用搜索框的时候,每次点击搜索框,它就自动帮我们把文本框内的文本全选中了,此时就用到了。原创 2022-10-07 17:04:18 · 1073 阅读 · 0 评论 -
JS DOM innerHTML和innerText
属性很方便地获取和设置一个元素的“内部元素”,也可以使用。在JavaScript中,我们可以使用。属性获取和设置一个元素的“内部文本”获取的是元素内部所有的内容,而。获取的仅仅是文本内容。原创 2022-10-06 21:19:46 · 997 阅读 · 0 评论 -
JS DOM之DOM遍历
DOM遍历,可以简单地理解为“查找元素”。举个例子,如果你使用等方法获取一个元素,然后又想得到该元素的父元素、子元素,甚至是下一个兄弟元素,这种操作涉及的就是DOM遍历。原创 2022-10-06 19:44:31 · 2148 阅读 · 0 评论 -
JS DOM之操作CSS属性
使用style对象来设置一个CSS属性的值,其实就是在元素的style属性中添加样式,这种方式设置的是“行内样式”需要注意的是,这里的属性名使用的是“骆驼峰型”的CSS属性名。在JavaScript中,我们可以使用cssText属性来同时设置多个CSS属性。在JavaScript中,想要设置一个CSS属性的值,有两种方式可以实现。obj表示DOM对象,attr表示CSS属性名,采用的同样是“骆驼峰”型。语法:obj表示DOM对象,cssText的值是一个字符串。应该写成borderBottomWidth。原创 2022-10-06 19:19:21 · 2398 阅读 · 1 评论 -
JS DOM之属性操作
HTML属性操作,指的是使用JavaScript来操作一个元素的HTML属性。如下面的input元素,HTML属性操作指的就是操作它的id、type、value等< input id = " btn " type = " button " value = " 提交 " />< input id = " btn " type = " button " value = " 提交 " />< input id = " btn " type = " button " value = " 提交 " />原创 2022-10-06 15:56:57 · 854 阅读 · 0 评论 -
带你彻底学会JS DOM技术之删除,复制,替换元素
参数obj表示被复制的元素,而参数bool是一个布尔值,取值如下。A表示父元素,new表示新子元素,old表示旧子元素。A表示父元素,B表示父元素内部的某个子元素。在JavaScript中,我们可以使用。在JavaScript中,我们可以使用。在JavaScript中,我们可以使用。//根据2个文本框的值来创建一个新节点。方法来删除父元素下的某个子元素。//获取body中的第1个元素。案例:删除最后一个子元素。//删除最后一个子元素。原创 2022-10-06 15:24:15 · 2280 阅读 · 0 评论 -
带你彻底学会JS DOM技术之创建,插入元素
所谓的“动态DOM”,指的是使用JavaScript创建的元素。来创建一个文本节点,然后可以将元素节点与文本节点“组装”成我们平常看到的“有文本内容的元素”。方法把已经创建好的“有内容的strong元素”插入到div元素中,这时才会显示出内容。动态创建了一个strong元素,但是此时strong元素是没有内容的。//将strong元素插入div元素(这个div在HTML已经存在)方法将一个新元素插入到父元素中的某一个子元素“之前”A表示父元素,B表示新子元素。把一个新元素插入到父元素的内部子元素的“末尾”原创 2022-10-06 15:11:43 · 4821 阅读 · 0 评论 -
带你彻底学会JS DOM技术之获取元素
DOM,全称是“Document Object Model(文档对象模型)”,它是由W3C定义的一个标准。在实际开发中,我们有时候需要实现这样的效果:鼠标移到元素上改变元素的颜色,或者动态添加新元素及删除元素等。这些效果就是通过DOM提供的方法来实现的。简单地说,DOM里面有很多方法,我们可以通过它提供的方法来操作一个页面中的某个元素,如改变这个元素的颜色、点击这个元素实现某些效果、直接把这个元素删除等。DOM采用的是“树形结构”,用“树节点”的形式来表示页面中的每一个元素。我们先看下面的一个例子。对于上原创 2022-10-06 14:44:36 · 718 阅读 · 0 评论 -
CSS定位布局详解
CSS定位使你可以将一个元素精确地放在页面上指定的地方。联合使用定位和浮动,能够创建多种高级而精确的布局。其中,定位布局共有4种方式。固定定位(fixed相对定位(relative绝对定位(absolute静态定位(static。原创 2022-10-03 19:55:37 · 6753 阅读 · 2 评论 -
2022年了,你还不会CSS浮动布局吗?
由于box1设置为左浮动,box1变成了浮动元素,因此此时box1的宽度不再延伸,而是由内容宽度决定其宽度。在实际开发中,我们几乎不会使用“clear:left”或“clear:right”来单独清除左浮动或右浮动,往往都是直截了当地使用“clear:both”来把所有浮动清除,既简单又省事。浮动是CSS布局的最佳利器,我们可以通过浮动来灵活地定位页面元素,以达到布局网页的目的。从上图可以看出,如果两个子块都没有设置浮动,由于div是块元素,因此会各自向右延伸,并且自上而下排列。属性来清除浮动带来的影响。原创 2022-10-03 18:36:36 · 998 阅读 · 1 评论 -
一文搞懂CSS盒子模型
在“CSS盒子模型”理论中,页面中的所有元素都可以看成一个盒子,并且占据着一定的页面空间一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型需要从两个方面来理解:一是理解单独一个盒子的内部结构(往往是padding),二是理解多个盒子之间的相互关系(往往是margincontent(内容)、padding(内边距)、margin(外边距)和border(边框)1、内容区内容区有3个属性:width、height和overflow。原创 2022-10-03 17:41:10 · 1576 阅读 · 0 评论 -
CSS超链接样式详解
除了使用浏览器自带的鼠标样式,我们还可以使用cursor属性来自定义鼠标样式cursor:url(图片地址),属性值;这个“图片地址”是鼠标图片地址,其中鼠标图片后缀名一般都是“.cur”,我们可以使用一些小软件来制作这个“属性值”一般只会用到3个,分别是default、pointer和text。原创 2022-10-03 17:14:47 · 7489 阅读 · 0 评论 -
CSS背景样式详解
颜色值有两种,一种是“关键字”,另外一种是“十六进制RGB值”。其中,关键字指的是颜色的英文名称,如red、green、blue等。属性取值为“关键字”时,也要同时设置水平方向和垂直方向的值,只不过这两个值使用关键字来代替而已。”表示背景图片距离该元素左上角的水平方向距离为12px,垂直方向距离为24px。我们在本地浏览器中拖动右边的滚动条,可以发现,背景图片在页面固定不动了。属性取值为“像素值”时,要同时设置水平方向和垂直方向的数值。属性常用取值有两种:一种是“像素值”,另外一种是“关键字”原创 2022-10-02 19:08:00 · 2186 阅读 · 0 评论 -
CSS边框样式详解
下面详细介绍一下`border-width、border-style`以及`border-color`属性原创 2022-09-29 19:18:53 · 4148 阅读 · 0 评论 -
CSS文本样式详解
去除a元素的下划线,这个技巧我们在实际开发中会大量用到。主要是因为超链接默认样式不太美观,极少网站会使用它的默认样式。属性来定义文本的修饰效果(下划线、中划线、顶划线)属性来控制文本在水平方向上的对齐方式。属性来定义两个单词之间的距离。属性来定义p元素的首行缩进。属性来控制字与字之间的距离。在CSS中,我们可以使用。在CSS中,我们可以使用。在CSS中,我们可以使用。在CSS中,我们可以使用。在CSS中,我们可以使用。属性来控制一行文本的高度。在CSS中,我们可以使用。在CSS中,我们可以使用。原创 2022-09-29 18:40:53 · 2275 阅读 · 0 评论 -
一文带你学会CSS选择器
一个样式的语法由3部分组成,即选择器、属性和属性值选择器,就是指用一种方式把你想要的那个元素选中。只有把它选中了,你才可以为这个元素添加CSS样式。原创 2022-09-29 17:51:35 · 813 阅读 · 0 评论 -
浅析HTML中的图片格式
在网页中,图片格式有两种,一种是“位图”;另一种是“矢量图”原创 2023-12-03 18:05:47 · 512 阅读 · 0 评论 -
HTML表格合并行和列
在设计表格时,有时我们需要将“横向的N个单元格”或者“纵向的N个单元格”合并成一个单元格(类似Word的表格合并),这个时候就需要用到“合并行”或“合并列”原创 2022-09-29 16:45:42 · 22384 阅读 · 0 评论 -
HTML块元素和行内元素
在HTML中,块元素在浏览器显示状态下将占据整一行,并且排斥其他元素与其位于同一行。一般情况下,块元素内部可以容纳其他块元素和行内元素。行内元素是可以与其他行内元素位于同一行的。此外,行内元素内部(标签内部)只可以容纳其他行内元素,不可以容纳块元素。原创 2023-12-03 17:39:09 · 435 阅读 · 0 评论