js外部对元素添加动作

最新推荐文章于 2022-03-28 17:49:07 发布
最新推荐文章于 2022-03-28 17:49:07 发布
阅读量399 收藏
点赞数
分类专栏： JAVASCRIPT 文章标签： function javascript class 文档 div
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/he19880413/article/details/4777001
版权

 

<HTML>
<HEAD>
    <style type="text/css">
    .style01{ font-size:16px; }
    .style02{ font-size:16px; color:#FF0000; }
    .style03{ font-size:16px; color:#009999; }
    .style04{ font-size:16px; color:#CC6666; }
    </style>
   
    <script language="JavaScript" type="text/javascript">
    function changeBack(){
        document.getElementById("show").className="style01";
    }
    function qiecs1() {
        document.getElementById("show1").className="style02";
    }
    function qiecs2() {
        document.getElementById("show").className="style03";
    }
    function qiecs3() {
        document.getElementById("show").className="style04";
    }
   

window.onload = startup;        //注意window.onload = startup; 不许要（）   window.onload是当文档加载完成后执行 基本和<Body οnlοad="startup();"> 一样
    function startup(){
    set_event();
    }
   
   
    function set_event(){
      document.getElementById("s1").onmouseover = qiecs1;                  //onmouseover事件会在鼠标指针移入指定的对象时发生  
      document.getElementById("s2").onmouseover = qiecs2;
      document.getElementById("s3").onmouseover = qiecs3;
   
      document.getElementById("s1").onmouseout = changeBack;             //onmouseout 事件会在鼠标指针移出指定的对象时发生
      document.getElementById("s2").onmouseout = changeBack;
      document.getElementById("s3").onmouseout = changeBack;
    }

    </script>
<HEAD>
   
<Body>

    <div>
      <span id="s1">切様式1</span>
      <span id="s2">切様式2</span>
      <span id="s3">切様式3</span>
    </div>
    <span id="show" class="style01">点上面的“切様式”可以改変span的様式。</span>
</Body>
<HTML>

另外如果在鼠标动作后的函数中跟有参数的话
改函数应该是

function qiecs1(id) {
        return function(){
        document.getElementById("id").className="style02";
        }
    }

由于对js还有待提高，所以其具体原因还不是很清楚。

he19880413
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js添加元素方法
香格里拉&的博客
01-14 3945
1.insertBefore添加元素到指定位置 <ul id="ul"> <li>1</li> <li>2</li> <li>3</li> </ul> <ul id="sel"> </ul> <script> var btn = docume...
在你的网页中嵌入外部网页的方法
10-30
`<iframe>` 元素则用于显示所选中的外部网页内容。 #### 四、定制与优化 - **自定义样式**：可以通过修改上面提供的 CSS 代码来调整标签的颜色、字体等样式。 - **增强功能**：可以进一步扩展 JavaScript 代码以...
JavaScript实现给按钮加上双重动作的方法
01-19
本文实例讲述了JavaScript实现给按钮加上双重动作的方法。分享给大家供大家参考。具体如下： 这里使用JavaScript给网页上按钮加入同时加入两个动作，一个是在文本框显示文字，另一个则是转向到某个网址，以往的按钮跳转都是单一的，这一个又在跳转时加入了将文字赋值给文本框的动作，搞懂了原理，就可以灵活运用了。 运行效果截图如下： 在线演示地址如下： http://demo.jb51.net/js/2015/js-button-two-action-codes/ 具体代码如下： <title>JavaScript给按钮加上双重动作</title> <script language=Jav
动态网页服务器动态产生,在服务器端动态产生前端网页的 onload 事件的 JavaScript code...
weixin_31968831的博客
08-13 225
摘要:在服务器端动态产生前端网页的 onload 事件的 JavaScript code下面的范例程序示范了如何在服务器端动态产生前端网页的 onload JavaScript 程序。protected void Page_Load(object sender, EventArgs e){Type t = this.GetType();string js = BuildStartupScript(...
js动态添加的元素，动作绑定
小贝de
12-12 479
$(document).on("click",".name",function(){ //code; })
js原生方法 在元素外部或内部实现添加元素功能（类似jq 的 insert 和 append）
风的专栏
09-11 5120
介绍的这个方法是：insetAdjacentHTML() 方法 此方法接收两个参数： 第一个参数必为下列值： beforebegin：在调用的元素外部的前面添加一个目标元素 afterend：在调用元素外部的后面添加一个目标元素   afterbegin：在调用元素的内部第一个子元素前面添加一个目标元素 beforeend：在调用元素的内部最后一个子元素后面添加一个目标元素   ...
js-examples:JavaScript 示例
05-31
DOM（Document Object Model）是HTML和XML文档的结构表示，JavaScript可以用来操作DOM，例如添加、删除或修改页面元素。在示例中，可能会看到如何通过`getElementById`、`getElementsByClassName`或`querySelector`...
jQuery插件扩展实例【添加回调函数】
10-21
在jQuery插件中，添加回调函数通常是为了解耦插件的执行流程和用户对结果的处理。例如，在`$.fn.citySelect`这个插件的实例中，我们可以看到一个`changeHandle`参数被添加，这个参数就是回调函数。当选择项发生变化...
js:JavaScript中的任何脚本和代码
05-24
DOM（文档对象模型）是HTML和XML文档的抽象表示，JavaScript提供API来操作DOM，包括查找、添加、删除和修改元素。 五、异步编程 JavaScript的异步编程主要依赖于回调函数、Promise、async/await等机制。异步处理...
实现触发动作可调用CSS和js文件功能
04-01
标题中的“实现触发动作可调用CSS和js文件功能”是指一种编程技术，它允许程序在用户执行特定操作（如点击按钮）时动态地加载和使用CSS（层叠样式表）和JavaScript文件。这种功能常见于网页开发和移动应用开发中，...
在JS中如何实现动作
curry_zhao的博客
11-09 856
在JS中如何实现动作，举例如下： 例如，跳跃的函数底层源码： cc.jumpBy = function (duration, position, y, height, jumps) {     return new cc.JumpBy(duration, position, y, height, jumps); };  example  * var actionBy = cc.jump
js---Dom给元素添加事件的两种方式
司天宏的博客
01-15 1万+
1.按照事件三要素的语法来添加事件,这种方式能让html元素和js脚本分离 例如： Html元素： &lt;input type="button" id="btn1" value="插入节点到末尾" /&gt; Js脚本 &lt;script&gt; var btn1=document.getElementById('btn1'); //父节点 ...
2022-03-28 工作记录--JS-对象添加动态属性 + 获取到动态属性的属性值
weixin_48850734的博客
03-28 3340
JS-对象添加动态属性
js为页面插入元素
热门推荐
Extreme的博客
06-10 2万+
插入元素的方式有三种 document.write() 这个方法如果在页面加载完成后使用，会清空整个页面的内容。如果在加载完成后使用，会在页面最后添加。 innerHtml() 这个方法可以用来插入内容，也可以插入元素。插入的内容或元素默认会替代原有内容 createElement(), appendChild() 使用createElement方法创建元素会返回一个元素对象， 使用a...
JS中给元素添加父级标签
前端-尔嵘
10-21 4188
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>每日一文</title> </head> <body> <div class="shuai">shuai1</div&gt...
js给网页中所有p元素添加onclick事件
wu_xiao_qing的博客
04-15 1万+
var p=document.getElementsByTagName("p");     alert(p.length);      for(var i=0;i      {       p[i].onclick=function(){       alert("")       }      }
JavaScript事件处理与基本特性详解
3. **外部脚本事件处理**：将JavaScript代码存放在.js文件中，通过`<script src="script.js"></script>`引入，然后在HTML元素中引用函数。 ### 四、DOM操作 JavaScript可以通过DOM API来操作HTML元素。例如，添加...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值