分类 JavaScript 下的文章

使用getComputedStyle获取样式

作者: admin
时间: 2021-03-14
分类: JavaScript
暂无评论

obj.style这种方式既可以读取样式属性，也可以写样式属性，但它操作的样式属性只能是行内样式，如果要访问内嵌或者链式样式，则不可以使用这种写法。
要访问内嵌或者链式样式，可以使用getComputedStyle()和currentStyle属性的方式来访问样式。
需要注意的是：getComputedStyle()和currentStyle属性只能读样式属性，不能写样式属性。

getComputedStyle()

getComputedStyle()可访问指定元素的指定css属性的结果样式,访问格式如下：


// 1
getComputedStyle(需访问样式属性的元素).样式属性


//2
getComputedStyle(ele)[attr]
getComputedStyle(需访问样式属性的元素)[样式属性]


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取结果样式</title>
		<style>
			div {
				width: 400px;
				height: 300px;
				background: #E15671;
			}
		</style>
	</head>
	<body>
		<div></div>
		
		<script>
			// 获取元素封装方法
			function $(str){
				return document.querySelector(str);
			}
			
			//这样写相当于获取标签的一个属性，但标签里又没有，就会出现undefined
			//let w = $('div').width;
			//console.log(w); // undefined
			
			//获取的是行间样式，如果没有行间样式，获取出来的就为空
			let w = $('div').style.width;
			console.log(w);  //
			
			// 获取的是结果样式,就是获取最终显示效果的样式，外链，内嵌，行间会有优先级
			// let w2 = window.getComputedStyle($('div')).width;
			// let w2 = window.getComputedStyle($('div'))['width'];
			// window下的方法都可以不用写window
			// getComputedStyle(ele)[attr]
			let w2 = getComputedStyle($('div'))['width'];
			console.log(w2);
			
			// 对于复合样式，如果是要获取某一样式，最好是单一属性来访问，比如背景颜色backgroundColor
			// let b2 = getComputedStyle($('div'))['background'];
			// console.log(b2);  //rgb(225, 86, 113) none repeat scroll 0% 0% / auto padding-box border-box
			
			let b2 = getComputedStyle($('div'))['backgroundColor'];
			console.log(b2); // rgb(225, 86, 113)
		</script>
	</body>
</html>

currentStyle

该属性只对IE游览器有效，对Chrome等游览器不可以，其主要是用于兼容IE6 7 8 的。


// 1
需访问样式属性的元素.currentStyle.样式属性

//  2
需访问样式属性的元素.currentStyle(样式属性)

要使用getComputedStyle()和currentStyle属性访问样式一般需要进行游览器兼容处理


// IE8以下支持的方法
var oDiv = document.querySelector('div');
			
// el.currentStyle(attr)
// 用if去判断el.currentStyle是否存在
if(oDiv.currentStyle){
    // IE8
    oDiv.currentStyle('width');
}else{
    // Chrome
    getComputedStyle(oDiv)['width'];
}

封装兼容getComputedStyle()和currentStyle


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>获取结果样式</title>
		<style>
			div {
				width: 400px;
				height: 300px;
				background: #E15671;
			}
		</style>
	</head>
	<body>
		<div></div>
		
		<script>
			// // IE8以下支持的方法
			var oDiv = document.querySelector('div');
			
			// // el.currentStyle(attr)
			// // 用if去判断el.currentStyle是否存在
			// if(oDiv.currentStyle){
			// 	// IE8
			// 	oDiv.currentStyle('width');
			// }else{
			// 	// Chrome
			// 	getComputedStyle(oDiv)['width'];
			// }
			
			// 封装 兼容getStyle
			// 由上面的if可以知道，获取样式需要填两个数据
			// el 元素
			// attr 样式名称
			// 然后复制写好的判断，替换下元素与属性
			// 需要注意的是，我们的目的是通过getStyle来获取结果样式
			// 所以我们还要加上return，使用return把结果返回给函数调用者
			
			function getStyle(el,attr){
				if(el.currentStyle){
					return el.currentStyle(attr);
				}else{
					return getComputedStyle(el)[attr];
				}
			}
			
			// 调用
			let w3 = getStyle(oDiv,'width');
			let h3 = getStyle(oDiv,'height');
			
			console.log(w3);  // 400px
			console.log(h3);  // 300px
		</script>
	</body>
</html>

三目运算符（三元运算符）

类似于if…else…
条件?a:b;


// if

let a =true
// if(a){
//     console.log(1);  // 1
// }else{
//     console.log(2);
// }


// 条件直接写?条件允许时执行问号后面的代码:条件不允许时执行冒号后面的代码;
// a?console.log(1):console.log(2);  // 1

// 
// console.log( a?1:2 )



// 简化之前
// function getStyle(el,attr){
// 	if(el.currentStyle){
// 		return el.currentStyle(attr);
// 	}else{
// 		return getComputedStyle(el)[attr];
// 	}
// }
	
// 简化之后
// 三目 - 条件内js语句不超过1句		
function getStyle(el,attr){
    return el.currentStyle?el.currentStyle(attr):getComputedStyle(el)[attr];
}

封装获取元素方法

作者: admin
时间: 2021-03-13
分类: JavaScript
暂无评论


var div = document.querySelector('div');

// 封装
		
function $(str){
    var div = document.querySelector(str);		
    return div;
}

// 简化
// 去掉变量，直接返回

function $(str){
    return document.querySelector(str);
}


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div></div>
    <script>
        function $(str){
            return document.querySelector(str);
        }

        $('div').style.backgroundColor = 'yellow';

    </script>
</body>
</html>

JavaScript Function return语句

作者: admin
时间: 2021-03-13
分类: JavaScript
暂无评论

return语句在函数定义中的作用有两个：一是返回函数值，二是中止函数的执行。
return可以返回包括基本数据类型、对象、函数等任意类型的值。


function fn(){

    console.log(123)

    // 每一个函数 都有一个return
    // 默认return 的值是undefined
    // 后面如果有值，会把值返回给函数调用者
    return [1,2,3];
}

let n = fn();

console.log(n) // (3) [1, 2, 3]

//return语句返回函数
function outeFunc(){
let b = 0;
return function(){
    b++;
    console.log("内部函数中b="+b);
    }
}
	   
let func = outeFunc();
func(); // 内部函数中b=1

当在函数体中使用return语句时，函数将会停止执行。


function fn(){
    console.log(1)
            
    // 阻断函数向下执行
    // return 只能存在于函数内部
    return;

    console.log(2)
}

console.log(3); //3

fn();  // 1

return 只能存在于函数内部。


function fn(){
    console.log(1)
            
    if(1){
        return;
    }
    // 阻断函数向下执行
    // return 只能存在于函数内部

    console.log(2)
}

// 语法错误
// if(1){
//         return;
//     }


console.log(3)

fn();

JavaScript Function

作者: admin
时间: 2021-03-13
分类: JavaScript
暂无评论

函数声明

自定义函数分为两类，有名函数和匿名函数。
有名函数的定义也叫函数声明，基本语法：


//function 函数名(){
// 需要执行的代码
//}

// 命名函数
function fn(){
 alert(1)
}

 // 调用该函数
fn();

匿名函数的定义有两种形式，函数表达式形式和事件注册形式。
函数表达式的基本语法：
函数表达式将匿名函数赋给一个变量，这样调用的匿名函数就可以通过这个变量来调用。


//let 变量名 = function (){
// 需要执行的代码
//}

// 函数表达式
var fn2 = function(){
    console.log(123);
};

事件注册式的基本语法：


//文档对象.事件 = function(){
//    console.log(123)
//};

btn.onclick = function(){
    console.log(123);
}

函数传参

实参与形参

所有的数据类型都可以当参数传递进去，多个参数用逗号隔开。


// n,f 形参 - 形式上定义的参数名,形参与实参一一对应
function fn(n,f){

    alert(n);  //1

    console.log(f);  //2
}

// 1,2 实参 - 实际传递的参数
fn(1,2);

//fn([1,2,3],function(){ alert('aaa') })

arguments 不定参

arguments其实就是传递给函数的实参集合。
它类似数组Array的对象，存放在arguments中的每一个实参，可以用arguments[下标]的格式来访问，对于arguments中存放的实参个数则可以使用arguments.length获得，除了length属性和通过索引值引用之外不能用任何数组的方法。


function fn(){
    // arguments 获取一组实参 伪数组
    console.log(arguments[1]);  //2

    // 实参的长度
    console.log(arguments.length);  //5

}

fn(1,2,3,4,99);

// arguments 不定参应用 实参的累加和
function fnSum(){
    var sum = 0;
    for(var i=0;i<arguments.length;i++){
        sum+=arguments[i];
    }
    console.log(sum);
}

fnSum(1,2,3,4,5,6,7,8,9);  //45

JavaScript数据类型

作者: admin
时间: 2021-03-11
分类: JavaScript
暂无评论

JavaScript是一门弱语言，不像C或者Java等那种强类型语言，用一个变量，还要先定义数据类型，定义成了int整型，就不能放字符串进去。

JavaScript定义的变量，就是你先放了数字进去，它就变成了数字类型，后面改放了字符串进去，也就变了字符串类型。

所以，在进行一些运算的时候，虽然灵活，但也会出毛病，这也是它的弱点。

JS中的数据类型：

1. Number
2. String
3. Boolean
4. undefined
5. Symbol
6. Object
7. null
8. function

除了基本类型以外（Number，String，Boolean，undefined ，Symbol ）
其他的都是对象（Object，null，function）


var numa = 18;           // number 数字类型
var stra = 'abc';        // string 字符串
var boola = true;         // boolean  布尔值，两个值  true  false
var a ;              // undefined 未定义
var sya = Symbol ();    //Symbol 类型
var b = document      // object 对象 
var c = null          // object 对象(空对象)
var funa = function(){}  // function 函数

获取检测变量的数据类型:

typeof可用来获取检测变量的数据类型,它是一个关键字，不是函数

用typeof运算符查看它们的数据类型：不同类型的返回值：number、string、boolean、function、undefined、symbol、object


typeof 18 -> number
typeof "abc" -> string
typeof true -> boolean
typeof undefined -> undefined
typeof null -> object  //返回的是Object类型

字面量：通俗来说，就是字面量表示如何表达这个值。123、"abc"、true
变量：容器，存储的值可以变的存东西，可以改
常量：容器，存储的值是不可变的存东西，不可改

数据类型转换

通俗来说，就是把一种数据类型的变量转换成另一种数据类型

显式类型转换（强制）：

转换为数字型 Number()
Number() 注：首字母大写

Number(val) 将数据转换成数字
- 字符串类型，使用 Number() 转换时，规则如下：

1.当整段字符串都符合数字规则时，转换为数字返回
2.空字符串,直接返回 0
3.其余情况，直接返回 NaN

- 布尔值类型，使用 Number() 转换时，true 返回 1，false 返回 0
- null，使用 Number() 转换时返回 0
- undefined，使用 Number() 转换时返回 NaN
- 对象类型，使用 Number() 转换时，调用的对象的toString()方法，然后再次依照前面字符串的转换规则进行转换


console.log(Number('12'));
//  console.log(Number('12')); ==>  12 

// Number它只能转行纯数字的字符串 否则返回NaN
var num = '123.4a';
console.log(typeof num)  // string
       
var num2 = Number(num);
console.log(num2)  //NaN
console.log(typeof num2) //number

转换为字符串类型 String()
- 数字类型，直接转换数据类型原样返回
- undefined ，直接返回字符串 undefined
- null，直接返回字符串 null
- 布尔值，直接返回字符串 true 或者 false
- 函数，直接把整个函数变成字符串返回
- 对象，直接调用对象的 toString 方法


        var num = 123;
        var nud = undefined ;
        var nul = null ;
        var bool = true ;
        var fn = function(){} ;
        var obj = {a:12} ;

        console.log(String(num))   // 123
        console.log(String(nud))   // undefined
        console.log(String(nul))   // null 
        console.log(String(bool))  // true 
        console.log(String(fn))    // function (){}
        console.log(String(obj))   // toString([object Object])

转换为布尔型 Boolean()
- 数字类型：非零的合法数字转换为 true, 零代表 false, NaN 代表 false
- 字符串类型：空字符串转换为false，非空字符串转换为true
- null：转换为false
- 对象：转换为true



var str = ' ';
var num = -0.1;
var arr = [];
var nul = null;

console.log(Boolean(num)); // true
console.log(Boolean(str)); // true
console.log('arr',Boolean(arr)); //arr true
console.log('null',Boolean(nul)); arr true

if(12){
  console.log('真');
}else{
  console.log('假');
}

// 什么是真（true），什么是假（ false） -- 有东西就是真，没东西就是假
// 真（true）：非零(正负数)、非空字符串、非空对象
// 假（ false）：零、空字符串、空对象（ 0、''、null、undefined  ）

隐式类型转换（能不用就尽量别用）：

这是存在一定风险的（出现一些小问题什么的），虽然是比较方便的方法，
但如果想要代码严谨一点，不要依赖隐式转换，而是要消除所有存在的隐式转换。
如果是长期使用的，比如一个库什么的，这时就要避免所有存在的隐式操作了，


+    //变字符串
- * / %   //     变数字
==  ===     //  转成布尔值



var a='12';
var b='3';

// + 号有两重含义，数字相加和字符串连接
console.log(a+b);
//  '12' + '3' ==>  ‘123’  变字符串

// - 号就只是存在于数字相减，不存在字符串相减，所以变数字
console.log(a-b);
//  '12' - '3' ==> 9   变数字

 //-----------------------------

var a=12;
var b='12';

// == 带有隐式转换，会先转换成一样的类型再进行比较
console.log(a==b);
// a==b   ==>  true

// === 直接比较
console.log(a===b);
// a===b    ==>   false

NaN 和 isNaN

在使用 NaN 时，要注意 NaN是个特殊的数字，它不等于任何值（包括它自己），也就是 NaN 不等于 NaN。

当我们要检测一条数据是否是 NaN 时，可以使用 isNaN(val) 来进行检测, 在 isNaN 方法中，传入的数据能被转换成合法数字时，就会返回 false，当传入的数据不能被转换成合法数字( 也就是NaN) 时，isNaN 就会返回 true



var str = '123.a';

console.log(str)  // 123.a
console.log(isNaN(Number(str))) // true
// isNaN 是一个NaN 返回 true 、反之 就是false

var a = NaN;
if(a == NaN){
    console.log('等于')  // NaN 不等于NaN 
}

工具函数

1.三种转换成字符串的方式

toString() 和 String() 一般情况下没什么大的区别,用谁都行。唯一不同的是toString()本质上是一个方法，当用在某些特殊的值上时区别就出来了

String() 转换成字符串

toString()转换成字符串

+''和字符串拼接的结果都是字符串(隐式转换了)


var a=12;
console.log(a,String());  // 12 ""
console.log(a,a.toString());  //12 "12"
console.log(a,a+'');  // 12 "12"  
// a+'' ==> String(a)+''  ==>  "12"

2.转换成数字

parseInt将string类型转换成整数

parseFloat将string类型转换成浮点数（小数）

注意大小写


// 取整
var num = parseInt(12.345);
console.log(num) //12

// 获取浮点数（保留小数） - 将字符串转成数字
var num = '123.4';
console.log(typeof num)  //string
       
var num2 = parseFloat(num);
console.log(num2)  //123.4
console.log(typeof num2)  //number