欣欣向荣的小博客-CSDN博客

原创 js提供的关于宽度的样式

offset系列只能读取对应的元素，不可以修改如果元素隐藏了（display:none)，读取不到属性console.log(objBox.offsetWidth);//objBox的宽度（包含width+padding+border）console.log(objBox.offsetHeight);//objBox的高度（包含width+padding+border）console.log(objBox.offsetLeft);//objBox左边到有定位属性（position）的父级左边缘

2020-11-30 12:43:57 190

原创读取对象的样式

<div class="box" ></div>方式一：var objBox = document.querySelector('.box');console.log(objBox.style.width);//如果标签没有行内样式，使用这种方法读取不出来对象的样式方法二：getComputedStyle(‘元素’,‘伪类’)可以获取当前元素所有最终使用的css（1）读取出来的数据是字符串（2）如果没有修改元素的属性，读出来的就是css样式表中的属性值，如果修改过

2020-11-30 12:34:32 159

原创对象的属性

对象的特征property操作一个对象首先要找到这个对象这个对象在初始化时，把html标签的全局和自有属性设置为对象的特征，还有很多其他的特征标签上面的自定义属性（属性前没加data-的自定义属性）不会被设置成对象的特征<div class="box" title="我是盒子" data-zs="zhangsan">zhangsan</div>var objBox = document.querySelector('.box');/*相当于 var objBox =

2020-11-30 12:21:23 197

原创标签

标签名tagName（1）标签名只能读取不能修改（2）读取出来的标签名都是大写的英文单词<div class = "box"></div>var objBox = document.querySelector('.box');console.log(objBox.tagName);//DIV读取标签的内容1.innerHTML读取标签内容可以读取出内部的标签2.innerText读取标签内容不能读取内部的标签，只能读取内部的纯文本设置（修改）标签的内容1.

2020-11-30 11:23:45 131

原创 web前端基础知识

1.HTML（Hyper Text Markup Language）超文本标记语言（网页内容的载体）2.CSS（Cascading Style Sheets）层叠样式表（表现）3.JavaScript 实现网页上的特效效果（交互）4.CSS选择器：（1）标签选择器（2）id选择器（页面中每个id只能出现一次，每个标签只能有一个id值）（3）类名选择器（4）群组选择器（5）* 通配符选择器层级选择器（6）后代选择器（7）父子选择器5.字体样式（1）中文默认是微软雅黑，英文默认ari

2020-11-30 11:06:31 543

原创对象集合和数组

<div id="box"> <div class="box"></div> <div class="box"></div> <div class="box"></div> <div class="box"></div></div><div class="box"></div><div class="box"></div>&l

2020-11-26 15:08:31 383

原创获取DOM对象的方法

1.通过id查找对象，返回一个对象document.getElementById('id名')2.通过标签名查找对象集合，即使返回0个或者1个，也是返回一个对象集合document.getElementByTagName('标签名')3.通过类名查找对象集合，即使返回0个或者1个，也是返回一个对象集合document.getElementByClassName('类名')...

2020-11-26 14:55:33 642

原创 BOM计时器

1.间隔定时器每隔多久执行一次，时间单位是毫秒（1秒=1000毫秒）（1）设置一个间隔计时器setInterval (function(){ console.log('我是间隔计时器要做的事情，每隔1秒执行一次');},1000);（2）清除一个间隔计时器var timer = setInterval (function(){ console.log('我是间隔计时器要做的事情，每隔1秒执行一次');},1000);clearInterval(timer);//清除timer这个间隔计

2020-11-26 14:45:04 231

原创 BOM弹窗

1.警告弹窗alert('具体内容')2.提示用户输入文字prompt('提示用户输入的内容')3.提示用户确认与否confirm('提示用户确认的内容')

2020-11-26 14:32:27 222

原创 window六大属性

1.history 历史记录window.history.go(1) //前进（跳转）window.history.go(-1)//后退（跳转）window.history.forward()//前进window.history.back()//后退2.location 定位window.location.href = '要跳转的页面地址'window.location.reload()//刷新页面3.navigatorwindow.navigator.userAgent//读取用户

2020-11-26 13:18:21 1012

原创变量的使用

1.临时变量var capA = '雪碧';var capB = '可乐';//交换capA和capB的值var capC = capA; //capC是临时变量capA = capB;capB = capC;console.log(capA);//可乐console.log(capB);//雪碧2.状态变量（通常是布尔值）var arr = [];var flag = true;//flag是状态变量//循环10次，如果状态是真，向数组中存入i*10,如果状态为假，向数组中存入

2020-11-26 13:10:24 224

原创对象的属性和方法

var lisi = { name:'李四', //对象的属性 say:function(){ //对象的方法 console.log('说话') }}

2020-11-18 12:12:58 246

原创遍历对象

对象没有length，没有下标，所以js提供了for in循环来遍历对象语法：for(var 变量名 in 对象名）{ console.log(对象名[变量名]);}（注：因为对象没有索引值，遍历的时候会优先遍历属性名是number类型的）...

2020-11-18 11:54:31 125

原创函数的形参和实参

function fn(a,b){ //函数形参，形参相当于函数内部的一个变量 console.log(a); console.log(b);}调用的时候传递实参，函数的形参和实参是一一对应的fn(3,5); //3 5多出来的实参无实际意义也不会报错fn(3,5,8); //3 5如果没有传递某个参数，形参的值是undefinedfn(3); //3 undefined...

2020-11-18 11:45:58 240

原创 js出现is notdefined的原因

1.没声明变量2.声明过一个变量，但是调用的时候名字写错了（相当于没有声明）3.在函数外调用函数内的变量

2020-11-18 11:38:16 8619

原创 flx布局

flex:Flexible Box的缩写，意为弹性布局，用来为盒模型提供最大的灵活性（任何一个容器都可以指定为flex布局）display:flex;flex布局分为容器和项目给哪个元素写flex布局哪个元素就是容器，它的子元素就是项目（注：项目也可以是一个flex布局的容器）flex布局中容器的属性1.flex-direction属性：决定主轴的方向（即项目排列的方向）flex-direction:row //（默认）水平布局主轴

2020-11-15 22:05:47 353

原创文本框去掉激活时的外描边

outline:none

2020-11-15 20:25:17 149

原创文字变省略号

white-space:nowrap; //文字强制不换行overflow:hidden; //溢出隐藏text-overflow:ellipsis; //文字隐藏效果：省略号

2020-11-15 20:24:19 274 1

原创浮动塌陷及解决

浮动塌陷：浮动的元素会脱离文档流，不占位，也不能撑起父元素的高度解决方法：1.给父元素定义高度2.给父元素添加overflow:hidden（溢出隐藏）属性3.清除浮动（推荐）：方法一：在一组浮动的元素后面再放一个块级元素，给这个元素定义样式为clear:both方法二：clearfix::after{ content:' '; display:block; clear:both; visibility:hidden;}...

2020-11-15 20:20:01 335