前端笔记之JavaScript（八）关于元素&计算后的样式

一.获取元素方法(JS选择器) 1.1概述得到id元素的方法 document.getElementById() 得到一个元素.事实上,还有一个方法可以得到标签元素,并且得到的是多个元素: document.getElementsByTagName(); 全线浏览器兼容的,得到元素的方法,就这两个: document.getElementById() 通过id得到元素 document.getElementsByTagName(); 通过标签名得到元素们还有更多的得到元素…

JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数

获取计算后的样式属性----获取一个元素任意一个样式属性值获取元素距离左边位置的值会有如下兼容性问题: my$("btn").onclick = function () { //获取元素距离左边位置的值 console.log(my$("dv").offsetLeft); //谷歌,火狐支持 //console.log(window.getComputedStyle(my$("dv"),null).left); //console.log(w…

JavaScript获取元素CSS计算后的样式

原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值呢? 原生JS方法可以使用document.defaultView提供的getComputedStyle()方法.该方法接受两个参数:需要取得计算样式的元素和一个伪元素字符串(例":after").如果不需要伪元素信息,第二个参数为null.代码示例如下: var idVal = doc…

前端笔记之JavaScript（九）定时器&JSON&同步异步/回调函数&函数节流&call/apply

一.快捷位置和尺寸属性 DOM已经提供给我们计算后的样式,但是还是觉得不方便,因为计算后的样式属性值都是字符串类型. 不能直接参与运算. 所以DOM又提供了一些API:得到的就是number类型的数据,不需要parseInt(),直接可以参与运算. offsetLeft和offsetTop offsetWidth和offsetHeight clinetWidth和clinetHeight 1.1 offsetWidth和offsetHeight 全线兼容,是自己的属性,和别的盒子无关的. 一个盒…

JavaScript的DOM_通过计算后样式来获取

虽然可以通过 style 来获取单一值的 CSS 样式,但对于复合值的样式信息,就需要通过计算样式来获取. DOM2 级样式,window 对象下提供了 getComputedStyle()方法.接受两个参数,需要计算的样式元素,第二个伪类(:hover),如果没有没有伪类,就填 null. 这种计算样式的获取,不仅仅可以获取到没有设置的默认样式,也可以获取行内,内联和链接(因为不管你在哪里设置CSS,最终会驻留在浏览器的计算样式里) <script type="text/javascri…

获取元素计算后的css样式封装

获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[attribute];}else { return window.getComputedStyle(obj,null)[attribute];} } 案例: <!DOCTYLE html> <html> <head> <meta charset="uft-8&qu…

JS获取元素计算过后的样式

获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = window.getComputedStyle(element, [pseudoElt]); element:用于获取计算养殖的element pseudoElt:可选,指定一个更匹配的伪元素的字符串,必须对普通元素省略或null 返回值:是指指定元素或伪元素的所有属性的集合如果没有伪元素,,伪元素…

JS获取对象在内存中计算后的样式

通过obj.style的方式只能取得"内联style"的值,对于<style></style>中的css属性值,则无能为力 . 我们可以用obj.currentStyle,和window.getComputedStyle()来获取 (注意: 只有 IE 和 Opera 支持使用 currentStyle 获取 HTMLElement 的计算后的样式, 其他浏览器中不支持. 标准浏览器中使用getComputedStyle, IE9及以上也支持getCompute…

前端笔记之JavaScript（一）初识JavaScript

一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML : 负责搭建页面结构样式层 CSS : 负责页面的美观行为层 JavaScript : 负责页面的交互效果,提高用户体验如果用舞台来进行比喻: HTML 是演员:div,a CSS 是化妆师:负责给每个演员添加装饰效果 javascript是剧本:负责描述每个演员之间的交互 1.2 JavaScript诞生 JavaScript一种直译式脚本语言,是一种动态类型…

前端笔记之JavaScript（五）关于数组和字符串那点事

一.数组 1.1数组概念数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]”.习惯将数组赋值给一个变量. var arr = []; var arr = [1,2,3,4,5,6,7,888,999,666]; arr[5] = 88; //把数组下标为5的项改为88(设置数组中的某一项) console.log(arr); console.log(arr[0]); //1…

前端笔记之JavaScript（十一）event&BOM&鼠标/盒子位置&拖拽/滚轮

一.事件对象event 1.1 preventdefault()和returnValue阻止默认事件通知浏览器不要执行与事件关联的默认动作. preventdefault() 支持Chrome等高级浏览器 returnValue 支持IE6.7.8 var box = document.getElementById('box'); var i = 0; //鼠标在box盒子滚动时触发 box.onmousewheel = function(event){ var event = ev…

前端笔记之JavaScript（四）关于函数、作用域、闭包那点事

一.自定义函数function 函数就是功能.方法的封装.函数能够帮我们封装一段程序代码,这一段代码会具备某一项功能,函数在执行时,封装的这一段代码都会执行一次,实现某种功能.而且,函数可以多次调用. 1.1函数的定义和调用语法: 定义:把需要实现的功能预先做好执行:需要的时候执行这个功能,而且还可以执行多次定义:function myName(){} 执行:myName() [语法解释]: function 定义函数的关键字 myName 函数名称 () 参数集…

js获取计算后的样式表

在编写html时,使用dom对象的style属性可以获取标签里的style属性,但是不能获取单独css样式文件或者style标签的属性值 <div style="width:10px"> </div> javascript:document.getElementsByTagName("div")[0].style.width //可以获取所以要获取最终style,要使用特殊的方法获取,计算后的最终样式表 function getFinalS…

前端笔记之JavaScript面向对象（三）初识ES6&underscore.js&EChart.js&设计模式&贪吃蛇开发

一.ES6语法 ES6中对数组新增了几个函数:map().filter().reduce() ES5新增的forEach(). 都是一些语法糖. 1.1 forEach()遍历数组 forEach()方法用来循环遍历数组,方法中的function回调函数接收3个参数参数1是遍历的数组内容(item):参数2是对应的数组索引(index),参数3是是数组本身(array). [].forEach(function(item,index,array){ ... }) var arr = ["白板&…

前端笔记之JavaScript面向对象（一）Object&函数上下文&构造函数&原型链

一.对象(Object) 1.1 认识对象对象在JS中狭义对象.广义对象两种. 广义:相当于宏观概念,是狭义内容的升华,高度的提升,范围的拓展.狭义:相当于微观概念,什么是“狭”?因为内容狭隘具体,范围窄所以称为“狭” l 狭义对象就是用{}这种字面量的形式定义的对象,它是一组属性的无序集合 var obj = { name : "小明", age : 12, sex : "男", hobby : ["足球","刺绣",&…

前端笔记之JavaScript（十）深入JavaScript节点&DOM&事件

一.DOM JavaScript语言核心.变量的定义.变量的类型.运算符.表达式.函数.if语句.for循环.算法等等.这些东西都属于语言核心,下次继续学习语言核心就是面向对象了.JavaScript能做非常多的事情:DOM开发.Ajax开发.Canvas开发.NodeJS开发.前端框架(React.Vue.Angular等等).HTML5开发.这些都需要语言核心的知识. DOM开发说白了就是浏览器中的页面效果开发,在2011年之前,DOM开发占据了前端开发工程师的90%的工作:年之后,前端要负…

前端笔记之JavaScript（七）深入函数&DOM那点事

一.函数补充 1.1 arguments类数组对象 arguments 是一个对应于传递给函数的参数的类数组对象. 在函数中,使用特殊对象 arguments,开发者无需明确指出参数名,就能访问它们. 在其它编程语言中,比如java:如果一个函数被定义过两次,每次参数个数都不同.相当于定义了两个不同的函数,根据参数个数不同,会选择不同的函数执行.一个函数名定义了两个函数,称为“函数重载”(overloaded). 复习一下函数,定义函数时,参数要罗列在圆括号中,这些参数,叫“形参”: funct…

3.前端笔记之JavaScript基础

作者:刘耀部分内容参考一下链接参考: http://www.cnblogs.com/wupeiqi/articles/5369773.html http://javascript.ruanyifeng.com/oop/basic.html http://www.cnblogs.com/gaojun/archive/2013/10/24/3386552.html 一.JavaScript简介 JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释…

前端笔记之JavaScript面向对象（四）组件化开发&轮播图|俄罗斯方块实战

一.组件化开发 1.1组件化概述页面特效的制作,特别需要HTML.CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成. new Carousel(); 实例化后,页面中就有一个轮播图的布局结构,而且可以通过参数传递进去. 这个new里面封装了HTML.CSS.JS的业务逻辑.组件开发的规律就是所有按钮.小圆点.图片等等都是这个类(的实例的)属性,自己管理自己. 组件开发的好处就是在用的时候可以高度自定义,在new的时…

前端笔记之JavaScript面向对象（二）内置构造函数&相关方法|属性|运算符&继承&面向对象

一.复习 1.1复习上下文函数的调用方式上下文 fun() window obj.fun() obj box.onclick = fun box setInterval(fun,1000) setTimeout(fun,1000) window array[8]() array new fun() 秘密创建的新对象要看清楚最终的函数调用者是谁. IIFE也被当做函数直接运行,IIFE的this都是window对象函数的arguments是类数组对象,比如传入的第0项参数是函数,让它运行:…

前端笔记之JavaScript（十二）缓冲公式&检测设备&Data日期

一.JavaScript缓冲公式ease 原生JS没有自己的缓冲公式,但是你要自己推理的话,必须要懂一些数学和物理公式: 让div用100毫秒(帧),从left100px的位置变化到left800px的位置,要求匀速: 大致计算如下: 毫秒编号(帧) 距离起点的增量目前绝对的位置 0 0 100 1 7 107 2 14 114 ... ... ... t t*c/d b+t*c/d 49 343 443 50 350 450 98 686 786 99 693 793 100 700 800…

前端笔记之JavaScript（六）让人头疼的正则表达式

一.正则表达式 1.1正则概述和体验正则表达式是被用来匹配字符串中的字符组合的模式,常用来做表单验证.在JavaScript中,正则表达式也是对象,是一种引用类型. 案例:正确输入一个电话号码,010-12345678,用户输入正确返回“对”,错误返回“错” var tel = prompt("请输入电话号码"); var reg = /^\d{3}-\d{8}$/; if(reg.test(tel)){ alert("对"); }else{ alert(&quo…

前端笔记之JavaScript（三）关于条件判断语句、循环语句那点事

一.条件分支语句条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力语法能够书写所有的条件分支语句.也就是说,一会儿学switch case语句,switch case语句能干的,if else语句一定也能干. 标准的完整结构: if(){ }else if(){ }else if(){ }else{ } else只能有一个,并且一定要放在最后.表示所有的分支都不满足的…

前端笔记之JavaScript（二）关于运算符&初识条件判断语句

运算符数学运算符的正统,number和number的数学运算,结果是number.出于面试的考虑,有一些奇奇怪怪的数学运算: 数学运算中:只有纯字符串.布尔值.null能够进行隐式转换. //隐式转换:就是没有写parseInt().parseFloat()也能自动帮你转换类型 console.log(2 + "4"); console.log(26 - "2"); console.log(3 * "8"); console.log("…

前端笔记：Html页面常用元素

Html页面由基本几个元素(标签)组成 html.head.body.foot(很少使用). html是整个页面的父级元素,内部包括head.body.foot子类标签. head是页头,及页面的头部,一般css,js,图片等放在页头,便于优先加载数据. body是网页的主要结构体,内部有各种各样的元素来组成我们看到的网页结构. foot是页尾,为页面的尾部,普遍展示的是公司的信息,客服热线等. head元素内常用的有如下几个元素 meta: 设置字符集编码格式 title: 页面标题,及页面的…

[javascript]javascript取得html元素，取得html样式，修改html样式

一.取得html元素详情见:https://www.jb51.net/article/116460.htm 1.通过ID获取(getElementById) document.getElementById('id') 2.通过name属性(getElementsByName) document.getElementsByName('name') 3.通过标签名(getElementsByTagName) document.getElementsByTagName('p') 4.通过类名(get…

【MarkMark学习笔记学习笔记】javascript/js 学习笔记

1.0, 概述.JavaScript是ECMAScript的实现之一 2.0,在HTML中使用JavaScript. 2.1 3.0,基本概念 3.1,ECMAScript中的一切(变量,函数名,操作符)都是区分大小写的. 3.2, 3.3, 3.4, 3.5, typeof 用于基本类型的判别,instanceof用于引用类型(Object类型)的判别. 3.6, 3.7, 3.8,Boolean类型有两个取值:true 和 false(区分大小写).使用Boolean()函数如下:注意,除n…