currentStyle
时间:2022-10-31
本文章向大家介绍currentStyle,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
大家好,又见面了,我是你们的朋友全栈君。
用js的style属性可以获得html标签的样式,但是不能获取非行间样式。
解决方法:
在IE下可以用currentStyle;
在FF下用getComputedStyle;
然而,为了让其兼容,解决方法,封装成getStyle事件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#div2{width:500px;height:100px;background-color:green;}
</style>
</head>
<body>
<div id="div2"></div>
</body>
</html>
<script>
最初:
if(oDiv2.currentStyle){
//IE
console.log(oDiv2.currentStyle.height);
}else{
// FF
console.log(getComputedStyle(oDiv2,false).width);
}
//封装一个兼容性的获取元素样式的函数
//分析:哪个元素,哪个样式
function getStyle(obj,attr){
if(obj.currentStyle){
//IE
return obj.currentStyle[attr];
}else{
//FF
return getComputedStyle(obj,false)[attr];
}
}
//用法
window.onload = function(){
var oDiv=document.getElementById("div2");
console.log(getStyle(oDiv,"width"));
}
//进一步封装
//obj:获取谁的样式,attr:样式名称,value样式的值
function css(obj,attr,value){
if(arguments.length==2){//获取
return getStyle(obj,attr)
}else if(arguments.length == 3){//设置
obj.style[attr] =value;
}
}
//用法:
// oBtn.onclick = function () {
// css(oDiv,"background","black");
// css(oDiv,"border","3px solid yellow");
// console.log(css(oDiv,"width"));
// }
</script>
补充:
JavaScript中,函数本身的length属性和arguments.length到底有什么区别?
1,函数本身有length属性,表示参数的个数。
arguments.length也表示参数的个数。
2,函数对象的length属性是形式参数的个数;
arguments伪变量的length属性是某次调用的实际参数的个数。
例如:
function func(a,b,c){
console.log(arguments.length);//输出:3
}
console.log(func.length)//输出: 1
func(1);
以上是后来发现错的,2017-03-16更正了以后:
function func(a,b,c){
console.log("arguments:"+arguments.length); //输出 arguments::1
}
console.log("length:"+func.length); //输出 length: 3
func(1);
3,函数本身也是对象,对象就有属性,函数有length属性,比如: function fn(x,y,z) {}中 fn.length=3,说明了函数的形参个数; 而在函数体内,arguments.length表示传入函数的实参个数,比如:function fun(1,2) { console.log(arguments.length)} 中实参的个数为arguments.length=2
4,fn.length: 形参个数 arguments.length: 实参个数
//拓展:
//arguments 数组(所有的参数) 可变参(不定参)
function sum2() {
var result = 0;
var i = 0;
for(i=0;i<arguments.length;i++){
result += arguments[i];
}
console.log(result);//输出13
}
sum2(4,4,5);
总结,除了可以用arguments去判断参数个数,还可以做不定参的运算。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/154507.html原文链接:https://javaforall.cn
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 以图搜图系统概述
- GitHub Pages 配置 letsencrypt 开启HTTPS
- R语言中ARMA,ARIMA(Box-Jenkins),SARIMA和ARIMAX模型用于预测时间序列数据
- 以图搜图系统工程实践
- R语言线性判别分析(LDA),二次判别分析(QDA)和正则判别分析(RDA)
- 用R语言实现神经网络预测股票实例
- R语言社区主题检测算法应用案例
- C++ vector学习笔记
- 锂电池充电慢?手把手教你制作锂电池快充充电器
- c++ cin, get学习笔记
- c++ sort 学习笔记
- CSS3 引入方式 注释 颜色属性 学习笔记
- 使用 Makefile 构建指令集
- 安卓 App 逆向课程之四 frida 注入 Okhttp 抓包中篇
- NumPy进阶修炼80题|41-60