提取行间事件

最新推荐文章于 2021-03-14 22:35:33 发布
最新推荐文章于 2021-03-14 22:35:33 发布
阅读量318 收藏 1
点赞数
分类专栏： javascript 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JZ_YouMayFly/article/details/77148882
版权

JS添加事件

方法1

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="按钮" />
        <script type="text/javascript">
            var oBtn=document.getElementById('btn1');
//          function test(){
//              alert("test");
//          }
//          oBtn.onclick=test;
            oBtn.onclick=function (){
                alert("test");
            };
        </script>
    </body>
</html>

方法2

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
        //需要添加window.onload
        //否则<input/>还没有加载，就先加载事件了，出错
        window.onload=function (){
            var oBtn=document.getElementById('btn1');
            oBtn.onclick=function() {
                alert("test");
            };
        }

        </script>
    </head>
    <body>
        <input type="button" name="btn1" id="btn1" value="按钮" />
    </body>
</html>

获取一组元素

getElementsByTagName()

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            div {
                width: 200px;
                height: 200px;
                float: left;
                border: 1px solid black;
                margin: 10px;
            }
        </style>
        <script type="text/javascript">
            window.onload=function(){
                var aDiv=document.getElementsByTagName('div');
                for(var i=0;i<aDiv.length;i++){
                    aDiv[i].style.background='red';
                }
            }
        </script>
    </head>

    <body>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
        <div>
        </div>
    </body>

</html>

全选不选反选示例

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function (){
                var oBtn1=document.getElementById('btn1');
                var oBtn2=document.getElementById('btn2');
                var oBtn3=document.getElementById('btn3');
                var oDiv=document.getElementById('div1');
                var aCh=oDiv.getElementsByTagName('input'); 

                oBtn1.onclick=function(){
                    for (var i=0;i<aCh.length;i++) {
                        aCh[i].checked=true;
                    }
                }
                oBtn2.onclick=function(){
                    for (var i=0;i<aCh.length;i++) {
                        aCh[i].checked=false;
                    }
                }
                oBtn3.onclick=function(){
                    for (var i=0;i<aCh.length;i++) {
                        if(aCh[i].checked==true){
                            aCh[i].checked=false;
                        }else{
                            aCh[i].checked=true;
                        }
                    }
                }
            }
        </script>
    </head>
    <body>
        <input type="button" name="" id="btn1" value="全选" />
        <input type="button" name="" id="btn2" value="不选" />
        <input type="button" name="" id="btn3" value="反选" /><br/>
        <div id="div1">
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>
            <input type="checkbox" name="" id="" value="" /> <br/>  
        </div>

    </body>
</html>
JZ_YouMayFly
关注
专栏目录
在线编辑器中换行与内容自动提取
09-06
首先，理解问题的关键在于，用户期望的换行是简单的行间间隔，即` `标签，而不是一个完整的段落`<p>`或自包含的区块`<div>`. ` `标签提供了一个轻量级的换行方式，不需要额外的封闭标签，更易于管理和处理。...
提取行间事件（window.onload）
梁什么鸭“的博客
05-01 333
目录 行间事件 提取行间事件 匿名函数 window.onload 总结 行间事件 <input type="button" value="变红" onclick="toRed()" /> 其中的onclick事件就是行间事件 这样写会有问题。当大家去公司工作的时候，不止你一个人在写这个页面，有很多人一起来写，编辑（负责往里填内容的），一般来讲编辑不太懂JS等语言，就有可能把行间事件给删除了，所以写行间事件比较危险。 还有一个小问题。栗子：当要给input添加事件，若有很多
JS——提取行间事件 结构与行为分离
何惜戈
12-14 355
某一按钮按下时触发一个事件 &lt;script type="text/javascript"&gt; function hello(){ alert('hello world !') } &lt;/script&gt; &lt;input type="button" name="" value="打个招呼" onclick="hello()"&gt
JavaScript-02-优先级/提取行间事件
baidu_37639000的博客
04-27 536
操作属性的两种方式： var element=document.getElementById(“div1”); ① element.style.width=”100px”;② element[“style”][“width”]=”100px”; [ ] 中括号内可以直接用字符串，也可以用变量代替。 方式①：代码简单易书写； 方式②：当需要修改的属性值不固定时可以用变
七.提取行间事件
qubaozhong1234的博客
03-14 124
/* 提取行间事件 具体实现： 提取事件 –为元素添加事件 事件和其他属性一样，可以用JS添加 window.onload的意义 行为，样式，结构三者分离。 获取一组元素 --getElementsByTagName */ style样式，具体实现代码如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" conte
JavaScript 行间事件、提取行间事件
DevOps海洋的渔夫@专栏
03-16 528
仅供学习，转载请注明出处 行间事件 什么是行间事件？ 将JavaScript函数写到HTML元素中的执行事件，那这种事件就是行间事件。 下面写一个示例，如下： 可以看到，在代码中点击则执行fnClick()方法。这种写在HTML元素中的方式就是行间事件。 那么下面点击执行一下看看，如下： 其中，可以看到点击按钮之后，下面div的字体就变...
关键帧提取,关键帧提取算法,Python源码.rar
10-10
3. **基于运动信息**：通过对视频进行光流分析，检测出帧间的运动变化，选择运动变化剧烈的帧作为关键帧。这种方法适用于运动密集型的视频。 4. **基于内容相似性**：利用图像的相似性度量，如SSIM（结构相似性指数...
易语言发送消息取编辑框某行文本
07-22
在易语言中，"发送消息"是实现对象间通信的一种方式，类似于其他编程语言中的方法调用或事件触发。在Windows API中，这种通信机制被称为Windows消息机制。 本主题的核心知识点是“发送消息取编辑框某行文本”，这...
支持向量机算法-基于监控视频的前景目标提取.pdf
05-01
2. **帧间差分法**：通过连续两帧之间的像素差分来检测运动目标，简单易行，但对光照变化和快速运动敏感。 3. **光流法**：光流描述了像素在连续帧间的运动，可用于检测和跟踪运动目标，尤其是在背景复杂、光照变化...
zzuli OJ 1037: 四则运算
强强强子的博客
08-28 1万+
Description 给你一个简单的四则运算表达式，包含两个实数和一个运算符，请编程计算出结果 Input 表达式的格式为：s1 op s2， s1和s2是两个实数，op表示的是运算符(+,-,*,/)，也可能是其他字符 Output 如果运算符合法，输出表达式的值；若运算符不合法或进行除法运算时除数是0，则输出"Wrong input!"。最后结果小数点后
第二次作业： 四则运算的实现
weixin_30254435的博客
03-16 293
Visual Basic 实现随机四则运算 前提： 老实的讲在学校里并没有教过Visual B，但是我用C-Free实在是没有办法独立写出来了，所以我把目标转向了Microsoft Visual Studio 2010，并且找到了《VB实例讲解》这本书里面找到了类似的例题就照着做了，到处修修改改之后还能用，感觉还不错...
JavaScript提取行间样式，currentStye与getComputedStyle方法
Mr_chen95的博客
10-25 375
很久没更新博客了，这段时间一直被js困扰，学习在我看来是件痛苦并快乐的事情，把今天学习到的东西记录下来，方便自己忘记，以便以后复习。 我们先来对一个div设置一些样式 #div1{ width: 100px; height:100px; background: red; }效果如下图 通常我们用js获取或修改行间样式会用这样一句代码 但是，问题来了，这只能
js 提取行间事件和多个标签 实现checkbook的全选、不选和反选
liuzong_dage的博客
11-02 234
&lt;head&gt;         &lt;meta charset="utf-8"&gt;         &lt;title&gt;&lt;/title&gt;         &lt;script type="text/javascript"&gt;             window.onclick=function(){                 var obt1=
获取 非行间样式
尹烁的博客
05-02 359
有人问 不能简单的使用 alert(oDiv.style.width);来获取元素样式吗例 可以获取的情况：<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script> window.onload=function () { var oDiv=document.getElementBy
Layui .render() 元素更新记得使用
热门推荐
J.Z's Blog
11-30 4万+
这几天写layui的 时候，js操作dom总是没有效果后来发现，需要调用一下*.render();//................. layui.use(['layer', 'form'], function () { //此处省略一万字 //......................... var form=layui.form; $("select[name
style与className
J.Z's Blog
08-13 4114
stylestyle加的是行间样式 style取的是行间样式 取值代码如下：var oDiv=document.getElementById('div1'); alert(oDiv.style.background);如果background在行间，<div id="div1" style="background: red;"> 能取出background值 如果background
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值