前端笔记之JavaScript(八)关于元素&计算后的样式
一、获取元素方法(JS选择器)
1.1概述
得到id元素的方法
document.getElementById() |
得到一个元素。事实上,还有一个方法可以得到标签元素,并且得到的是多个元素:
document.getElementsByTagName(); |
全线浏览器兼容的,得到元素的方法,就这两个:
document.getElementById() 通过id得到元素
document.getElementsByTagName(); 通过标签名得到元素们
还有更多的得到元素的方法:
document.getElementsByClassName();通过类名得到元素
document.querySelector(); 通过选择器得到元素
document.querySelectorAll();通过选择器得到元素,得到的是一组元素
document.getElementsByName(name) 通nama属性名获取元素
这些不是全线浏览器兼容,IE8以上开始兼容。
1.2 getElementsByTagName
getElementsByTagName就是通过标签名得到元素,得到的是页面上所有的该标签元素,得到的是数组。数组有下标,下标0开始,最后一项length-1。通过标签名获得所有标签名这个标签。类似于css中的标签选择器。选择的是一组元素。
get 得到
elements 元素们
By 通过
TagName 标签名字
var ops = document.getElementsByTagName("p");
console.log(ops);
// ops.style.backgroundColor = "skyblue"; //错误写法,因为得到的是一根数组,必须用下标获取元素
ops[0].style.backgroundColor = "skyblue";//获取下标为1的标签
ops[1].style.backgroundColor = "skyblue";//获取下标为2的标签
ops[2].style.backgroundColor = "skyblue";//获取下标为3的标签
ops[3].style.backgroundColor = "skyblue";//获取下标为4的标签
ops[4].style.backgroundColor = "skyblue";//获取下标为5的标签
ops[ops.length-1].style.backgroundColor = "skyblue";//获取最后的标签
既然是数组,就可以通过循环语句批量控制。
var ops = document.getElementsByTagName("p");
//循环给所有p标签
for(var i = 0;i < ops.length;i++){
console.log(i)
ops[i].style.backgroundColor = "skyblue";
}
HTML标签从上到下执行,依次是0,1,2,3,4
<div>
<div>
<p>0</p>
<div>
<p>1</p>
</div>
<p>2</p>
</div>
<p>3</p>
</div>
<p>4</p>
//页面上只有一个p标签,也必须用数组[]得到
document.getElementsByTagName('p')[2].style.color = "red";
1.3连续打点调用get
先去选择一个HTML标签,然后选择这个HTML标签中所有的p元素
连续打点调用get方法,控制范围,选中父亲下的什么什么元素。
document.getElementsByTagName('div')[0].getElementsByTagName('p')[1].style.color = "red"; |
错误写法:不要多写document,只要开头有一个就可以了。
document.getElementsByTagName('div')[0].document.getElementsByTagName('p')[1].style.color = "red"; |
实际应用:先用id名去缩小范围,内部的多选择使用标签选择器。
document.getElementById('box').getElementsByTagName('p')[1].getElementsByTagName('span')[1].style.color = 'red'; |
表格隔行变色:
var tr = document.getElementById("table").getElementsByTagName('tr');
//不管个数是多少,编号从0开始
for(var i = 0;i < tr.length;i += 2){
//从0开始,每次加2,所以都是偶数
tr[i].style.backgroundColor = "pink";
}
for(var i = 1;i < tr.length;i += 2){
//从1开始,每次加2,所以都是奇数
tr[i].style.backgroundColor = "skyblue";
}
1.4批量添加事件添加
如果一些相同的元素,添加相同事件,事件函数内部的代码几乎相同,可以批量选择元素添加事件。
注意:找出数组中每一项,定义事件函数,用for循环中的变量。闭包可能会程序造成影响。
循环给所有p标签添加事件,并且弹出对应的编号:
var ops = document.getElementsByTagName('p');
for(var i = 0;i < ops.length;i++){
ops[i].onclick = function(){
alert(i); //循环结束后都还执行函数,所以值
}
}
但是,对编号的影响,闭包的影响又出现了。
所以每个盒子点击后都是5,而不是0,1,2,3,4。
闭包的影响:匿名函数定义时,都已经记住了自己认识i,但是认识i不是表示把i的值复制一份保存,所以匿名函数执行时(就是事件触发时),i的值变为循环结束的值了。
解决方法1:使用IIFE关住当时定义时的作用域,点击事件发生时,执行对应的事件函数,事件函数会去找自己定义时的作用域。定义时a已经被传递了参数,值就已经存储起来了。
var ops = document.getElementsByTagName('p');
for(var i = 0;i < ops.length;i++){
(function(a){
ops[a].onclick = function(){
alert(a);
}
})(i); //把每次循环i的值传递给函数局部变量a
}
解决方法2:获取的元素,本身封装了大量的属性和方法,还能自定义一些新属性并赋值,自定义属性后可以打点调用。
任何对象都可以自定义属性,并赋值:
Math.aaa = 9999;
window.aaa = 8888;
Array.bbb = 12345;
console.log(Math.aaa)
console.log(window.aaa)
console.log(Array.bbb)
var ops = document.getElementsByTagName('p');
for(var i = 0;i < ops.length;i++){
ops[i].index = i; //自定义属性,并且把循环i的值赋值保存到属性中,名称自定义的
ops[i].onclick = function(){
alert(this.index); //this关键字就代表事件源本身
}
}
解决方式:每个元素对象添加一个自定义属性,用属性存储循环变量,在事件函数内部与都有一个特殊关键字,叫this,this会指向事件源本身,它能完全替代事件触发的那个事件源对象。
事件源:谁触发事件,谁就是事件源(谁就是this)
1.5对应和排他思想
保留自己排除别人。
实际运用到代码中,批量控制给所有人添加一个相同样式,然后再给被操作的元素添加特殊样式。
做到了先排除所有人,然后再保留自己的特殊样式。
对应模型:点击第一排p,第二排对用编号的p变色。
// 方法1:编号,循环添加事件监听,给第一排所有p并且绑定点击事件
for(var i = 0;i < box1.length;i++){
box1[i].index = i;
box1[i].onclick = function(){
console.log(this.index)
box2[this.index].style.backgroundColor = "red";
}
}
//方法2:IIFE
for(var i = 0;i < box1.length;i++){
(function(i){
// console.log(i)
box1[i].onclick = function(){
box2[i].style.backgroundColor = "red";
}
})(i);
}
排他思想:点击p的时候,就自己变红色,其他所有o都变灰色
var aps = document.getElementById('box').getElementsByTagName("p");
var biaoti = document.getElementById("biaoti");
//循环添加监听
for(var i = 0;i < aps.length;i++){
aps[i].index = i; //自定义编号
aps[i].onclick = function(){
//每点击一个p并且,实际上两件事
//第一件事:让所有人(包括自己)都变灰色
for(var j = 0;j < aps.length;j++){
//aps[j].style.backgroundColor = "#ccc";
aps[j].className = ""; //清空类型
}
//第二件事:让自己都变红色
//this.style.backgroundColor = "#f40";
this.className = "current"; //添加类名
}
}
轮播图:
var imgList = document.getElementById('imgList').getElementsByTagName('li');
var navList = document.getElementById('navList').getElementsByTagName('li');
var leftBtn = document.getElementById('btn1');
var rightBtn = document.getElementById('btn2');
var index = 0; //全局信号量,是ul的li下标,下标为几,就显示第几个li
//右按钮
rightBtn.onclick = function(){
index++;//信号量自加
//后验收
if(index > imgList.length-1){
index = 0; //回到第一张
}
slide();//调用函数
}
//左按钮
leftBtn.onclick = function(){
index--;//信号量自减
//后验收
if(index < 0){
index = imgList.length-1; //回到第一张
}
slide();//调用函数
}
//封装函数
function slide(){
//排他:将所有人的隐藏(类名清空),再让自己加current类名(谁有类名谁就显示)
for(var i = 0;i < imgList.length; i++){
//第一步:让所有图片li标签隐藏
imgList[i].className = "";
//让所有ol的li都清空
navList[i].className = "";
}
//让自己显示,其他li隐藏
//给当前编号的ul的li添加类名,显示图片
imgList[index].className = "current";
//给当前编号的ol的li添加类名,显示小圆点
navList[index].className = "current";
}
//下面小圆点如果点击,应该让index对应的发生变化
for(var i = 0;i < navList.length;i++){
navList[i].index = i; //自定义属性
navList[i].onclick = function(){
index = this.index; //把当前被点击的li编号重新赋值给全局变量(修改全局)
// index得到后,执行函数
slide(); //调用函数
}
}
选项卡:
var tab_li = document.getElementById('tab-hd').getElementsByTagName("li");
var tab_ul = document.getElementById('tab-bd').getElementsByTagName("ul");
//批量给li添加鼠标移入事件
for(var i = 0; i < tab_li.length;i++){
tab_li[i].index = i; //自定义属性,存储i的值
tab_li[i].onmouseenter = function(){
//排他思想:
//第一步:先清空所有li元素的类名
for(var j = 0; j < tab_li.length;j++){
tab_li[j].className = ""; //清空li的类名
tab_ul[j].className = ""; //清空ul的类名
}
//第二步再给自己添加类名
this.className = "current"; //给当前鼠标移入的li添加类名
tab_ul[this.index].className = "current"; //给对应编号的ul添加类名
}
}
二、得到计算后的样式
2.1高级浏览器和低级浏览器的不同写法
现在我们只能得到行内的样式,事实上DOM提供了可靠的API,得到计算后的样式(内嵌式和外链式)。
W3C制定的标准API,所有现代浏览器(包括IE9,但不包括之前的版本)支持window.getComputedStyle()方法,该方法接收一个要进行样式计算的元素,并返回一个样式对象。样式对象提供了getPropertyValue()的方法,用于检索特定CSS样式属性的计算样式。getPropertyValue()方法接收css属性名称,而不是驼峰式的名称。getPropertyValue()可以不写,直接用[]方括号来代替检索属性也可以。
get得到,computed计算后,style样式
get得到,property属性,vaule值
这种方式获取和设置的都是行内样式,无法获取内嵌和外链的CSS样式:
console.log(oBox.style.width); |
window.getComputedStyle(oBox); //得到当前div元素所有的CSS样式 window.getComputedStyle(oBox).getPropertyValue("width"); //获取计算后的样式 |
所有的window对象的方法,都可以不写window
window.alert(); |
等价于:
alert(); |
得到计算后的样式,可以直接使用getComputedStyle()方法,不用写window。
还要注意,引号里面是CSS属性,不是驼峰命名法。
getComputedStyle(oBox).getPropertyValue("padding-left") |
getPropertyValue()方法看着就不爽,所以可以用“[]”来代替它
getComputedStyle(oBox)["padding-left"]; |
计算后的综合结果,就是这个元素此时的状态:
getComputedStyle(oBox)["background"];
getComputedStyle(oBox)["background-color"]; //样式计算后结果是得到rgb的值
getComputedStyle(oBox)["background-image"];
getComputedStyle(oBox)["border"];
上面的方法IE6、7、8一律不兼容!!!
DOM提供给JS的非常牛,一个元素此时的状态,可以完全被得到,好用的属性,但是不兼容。所以IE6、7、8不兼容getComputedStyle()方法,写另外一套写法:附加在元素身上的currentStyle属性,它和style点语法一样,使用驼峰命名法。
IE6、7、8支持以下写法:
注意:currentStyle得到样式,必须用驼峰命名法,写法和oBox.style.width这种一样
oBox.currentStyle.paddingLeft |
可以不写点语法,使用“[]”,但是也必须是驼峰命名。
oBox.currentStyle['paddingLeft'] |
alert(oBox.currentStyle.width);
alert(oBox.currentStyle.height); //不写高度得到的是auto,不能获取被内容撑开的高度
alert(oBox.currentStyle.backgroundColor); //颜色值会原样输出,pink
颜色值在高级浏览器中是rgb(),低版本浏览器是原样输出
总结:
高级浏览器:
window.getComputedStyle(oBox).getPropertyValue("padding-left");
getComputedStyle(oBox).getPropertyValue("padding-left");
getComputedStyle(oBox)["padding-left"]; IE6/7/8浏览器
oBox.currentStyle.paddingLeft
oBox.currentStyle["paddingLeft"];
2.2兼容写法
IE6、7、8低级浏览器,不认识getComputedStyle视为错误
Chrome等高级浏览器,不认识currentStyle视为错误
所以,现在就要进行一个兼容性写法,新玩家会认为,要检测浏览器版本,如果版本是IE6、7、8那么……。
实际上,老司机都不这么做。我们不关心你的浏览器版本是什么,我只关心你浏览器的能力。
所以要进行能力检测,可以在不同浏览器中得到兼容性的写法,输出CSS属性的值:
如果能使用这个方法,方法作为if语句的判断条件就会返回true,不能使用就返回false。
if(window.getComputedStyle){
//条件满足为真,说明当前浏览器认识getComputedStyle()方法
alert(getComputedStyle(oBox)["background-color"]);
}else{
//条件不满足,说明当前浏览器不认识getComputedStyle()方法,认识currentStyle
alert(oBox.currentStyle.backgroundColor);
}
封装一个兼容性的函数获取一个元素某个CSS属性值的方法。
API:传入两个参数,第一个是元素对象,第二个是CSS属性名
返回值:是这个传入元素对象的CSS属性值
function getStyle(obj,property){
if(window.getComputedStyle){
//高级连起来,要把用户输入的CSS属性中检测一下是否为驼峰,如果是就转为连字符写法
//强制把用户输入的大写字母,变为小写字母加“-”
// paddingLeft 替换 padding-left
// 正则替换:
property = property.replace(/([A-Z])/g,function(match,$1){
return "-" + $1.toLowerCase();
})
//返回计算后的样式
return getComputedStyle(obj)[property];
}else{
//IE只认识驼峰,要防止用输入短横,如果输入短横,要把短横改为大写字母
//padding-left替换paddingLeft
property = property.replace(/-([a-z])/g,function(match,$1){
return $1.toUpperCase();
})
//返回计算后的样式
return obj.currentStyle[property];
}
}
alert(getStyle(oBox,"padding-left"));
alert(getStyle(oBox,"backgroundColor"));
2.3关于opacity
opactiy取值0.0~1.0,而滤镜取值0~100。
尽管IE8和早期版本不支持opacity,通过style.opacity或者ele.currentStyle.opacity属性取值时,返回的依然是opacity值,即使浏览器完全忽略了opatity值。这是一个好事儿,当我们能够保证opactiy、filter中设置的属性是一致的,则JavaScript读取opactiy值就算是兼容的。
支持opacity的浏览器,总会将.6这种写法规范为0.6 。 而不支持opacity的浏览器则会返回原有的形式.5。这是一个小坑,进行比较的时候需要注意。
设置opacity的时候,我们需要同时设置filter属性,filter中的数值是opacity的100倍。
查了100倍
var oBox = document.getElementById("box");
// alert(oBox.style.opacity); //JS没有兼容性问题
// alert(oBox.currentStyle.opacity); //低版本没有兼容性问题
var opacity = 0.5;
oBox.style.opacity = opacity;
oBox.style.filter = "alpha(opacity="+(opacity * 100)+")";
前端笔记之JavaScript(八)关于元素&计算后的样式的更多相关文章
- JS---获取元素计算后的样式属性值 (getComputedStyle)---兼容函数
获取计算后的样式属性----获取一个元素任意一个样式属性值 获取元素距离左边位置的值 会有如下兼容性问题: my$("btn").onclick = function () { / ...
- JavaScript获取元素CSS计算后的样式
原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...
- 前端笔记之JavaScript(九)定时器&JSON&同步异步/回调函数&函数节流&call/apply
一.快捷位置和尺寸属性 DOM已经提供给我们计算后的样式,但是还是觉得不方便,因为计算后的样式属性值都是字符串类型. 不能直接参与运算. 所以DOM又提供了一些API:得到的就是number类型的数据 ...
- JavaScript的DOM_通过计算后样式来获取
虽然可以通过 style 来获取单一值的 CSS 样式,但对于复合值的样式信息,就需要通过计算样式来获取. DOM2 级样式,window 对象下提供了 getComputedStyle()方法.接受 ...
- 获取元素计算后的css样式封装
获取元素计算后的css样式封装: function getCss(obj,attribute) { if(obj.currentStyle) { return obj.currentStyle[att ...
- JS获取元素计算过后的样式
获取元素计算过后的样式 Window.getComputedStyle() 方法会在一个元素应用完有效样式且计算完所有属性的基本值之后给出所有 CSS 属性的值. 语法: let style = wi ...
- JS获取对象在内存中计算后的样式
通过obj.style的方式只能取得"内联style"的值,对于<style></style>中的css属性值,则无能为力 . 我们可以用obj.curre ...
- 前端笔记之JavaScript(一)初识JavaScript
一.JavaScript简介 1.1网页分层 web前端一共分三层: 结构层 HTML : 负责搭建页面结构 样式层 CSS : 负责页面的美观 行为层 JavaSc ...
- 前端笔记之JavaScript(五)关于数组和字符串那点事
一.数组 1.1数组概念 数组(array)是一个有序的数据集合.说白了,数组就是一组数.数组内部可以存放一个或多个单独的数据,整体组成数组. 定义数组最简单的方式:数组字面量. 数组的字面量“[]” ...
随机推荐
- SSL/TLS抓包出现提示Ignored Unknown Record
SSL/TLS抓包出现提示Ignored Unknown Record 出现这种提示有两种情况.第一种,抓包迟了,部分SSL/TLS的协商数据没有获取,Wireshark无法识别和解析.第二种,数据包 ...
- POJ 3751 JAVA
题意: 对于给定的采用”yyyy/mm/dd”加24小时制(用短横线”-”连接)来表示日期和时间的字符串, 请编程实现将其转换成”mm/dd/yyyy”加12小时制格式的字符串,末尾加上pm或者am. ...
- Run Keyword And Ignore Error,Run Keyword And Return Status,Run Keyword And Continue On Failure,Run Keyword And Expect Error,Wait Until Keyword Succeeds用法
*** Test Cases ***case1 #即使错误也继续执行,也不记录失败,且可以返回执行状态和错误信息 ${Run Keyword And Ignore Error status} ${st ...
- iptv
# -*- coding: utf-8 -*- import datetime, time, json, re, os #from pwd import getpwnam #quality str_q ...
- nw.js中用sqlite3
前一段时间,nw.js 项目中想用一个本地数据,最后选择了sqlite3.选好之后就开始干吧,结果mmp,被坑了好久. nw.js官方文档也有调用node原生模块的API,但是照着文档那样配置,以为会 ...
- Kafka监控工具kafka-monitor v0.1简要介绍
Kafka Monitor为Kafka的可视化管理与监控工具,为Kafka的稳定运维提供高效.可靠.稳定的保障,这里主要简单介绍Kafka Monitor的相关功能与页面的介绍: Kafka Moni ...
- position 几个属性的作用
//定位一般都会配合left 和 top 一起使用; //静态定位 : 元素默认位置; 不脱标 不常用position:static; //相对定位 : 相对于元素本身之前的位置进行定位;不脱标pos ...
- CSS背景图片
1.背景图片插入 代码格式:background-image:url(): 括号内填写图片路径 2.背景图片设置大小 代码格式:background-size:宽.高 3.背景图片设置不平铺 代码格式 ...
- 神经网络_线性神经网络 3 (Nerual Network_Linear Nerual Network 3)
1 LMS 学习规则_解方程组 1.1 LMS学习规则举例 X1=[0 0 1]T,t1=0:X2=[1 0 1]T,t2=0:X3=[0 1 1]T,t3=0:X1=[1 1 1]T,t1=1. 设 ...
- EF Core中避免贫血模型的三种行之有效的方法(翻译)
Paul Hiles: 3 ways to avoid an anemic domain model in EF Core 1.引言 在使用ORM中(比如Entity Framework)贫血领域模型 ...