js基础——操作行内样式和对触发事件的理解

最新推荐文章于 2023-09-26 09:13:50 发布

Lemon

最新推荐文章于 2023-09-26 09:13:50 发布

阅读量1.2k

点赞数 2

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_43314846/article/details/98461285

版权

学习专栏收录该内容

80 篇文章 0 订阅

订阅专栏

本文是对上一文"js基础"的补充

一、操作行内样式

1. 上文说到:通过`对象.style.属性名`js只能操作行内样式。它实际的含义是：通过该方法只能获取到行内样式，但是无论外部样式或者内嵌样式是否有某一个属性，都可以通过`对象.style.属性名`修改该属性的值，此时相当于给行内样式增加该属性，并赋值。当该对象的行内样式的属性有值时，由于行内样式的优先级大于内嵌样式，故最终会应用新的值

在这里插入图片描述

<javascript>
console.log(document.getElementById("p").style.borderColor);<!--NAN-->
<!--可给p的border的颜色重新赋值，且该属性为内嵌样式-->
document.getElementById("p").style.borderColor = "#e40000";
</javascript>
<style>
p{
	border:1px solid transparent;
}
</style>
<body>
<p>1</p>
</body>

2. 无论该对象有没有行内样式，通过`对象.style`可获取到所有样式属性。但未给其中的属性赋值前，属性对应的值都为空

在这里插入图片描述

二、 `window.event`、`event`、`arguments[0]`在不同情况下的应用

无论在任何标签内输出 window.event、event、arguments[0]以及后两种方式输出形参e都是当前正在被触发的事件（即值都是一样的）

1. 在行内直接写代码

无法传参。

所有浏览器都支持`window.event`、`event`来获取当前正在被触发的对象的事件。而IE8及其以下不能使用`arguments[0]`来获取，其余浏览器则可以

<p onclick = "alter(event)"></p>
<p onclick = "alter(window.event)"></p>
<p onclick = "alter(arguments[0])"></p>

2. 在行内调用函数

可传参，也可直接调用

传参只可传`window.event`、`event`、`arguments[0]`(不能传e，e在此处无意义)，`window.event`、`event`也可以在对应的函数中直接调用（不能直接在函数中使用e为形参（e无值）），但`arguments[0]`不可以直接调用。IE8及其以下无法识别`arguments[0]`。

<script>
function test(e){
        console.log(e);//所有浏览器都可以输出当前被触发的事件
        //以下三种方式除第三种IE8以下不能使用以外，其他浏览器都可以使用
        console.log(event);
        console.log(window.event);
        console.log(arguments[0]);
    }
</scripy>
<body>
 <p>
    <input type="text" onclick="test(event)">
    //或
     <input type="text" onclick="test(window.event)">
     //或
      <input type="text" onclick="test(arguments[0])">
    </p></
   body>

3. js与html分开(内嵌或者外部都可)

可传参，也可直接调用

可以在函数中写形参e（或者任意名称（不可以写window.event））,此时e代表当前正在被触发的事件。所有浏览器都可以使用。也可以直接在函数内输出`window.event`、`event`、`arguments[0]（IE8以下不可用）`

<script>
	document.querySelector("#1").onclick = function(e){
	console.log(e);
	console.log(event);
   console.log(window.event);
    console.log(arguments[0]);
}
</script>
<body>
	<p id="1">2</p>
</body>

4. 监听事件

可传参，也可直接调用

可以在函数中写形参e（或者任意名称（不可以写window.event））,此时e代表当前正在被触发的事件。所有浏览器都可以使用。也可以直接在函数内输出`window.event`、`event`、`arguments[0]（IE8及其以下也可以用！！！！）`

<script>
 var spanList = document.getElementsByTagName("span");
            spanList[0].addEventListener("click", function (e) {
                console.log(e);
                console.log(event);
  				 console.log(window.event);
   				 console.log(arguments[0]);
            })
</script>
<body>
	<span>2</span>
</body>
````

Lemon

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础——操作行内样式和对触发事件的理解

本文是对上一文"js基础"的补充一、操作行内样式1. 上文说到:通过对象.style.属性名js只能操作行内样式。它实际的含义是：通过该方法只能获取到行内样式，但是无论外部样式或者内嵌样式是否有某一个属性，都可以通过对象.style.属性名修改该属性的值，此时相当于给行内样式增加该属性，并赋值。当该对象的行内样式的属性有值时，由于行内样式的优先级大于内嵌样式，故最终会应用新的值&lt...
复制链接

扫一扫