编写函数实现点击change按钮，为div元素添加红色双线边框

最新推荐文章于 2024-02-06 15:10:24 发布
最新推荐文章于 2024-02-06 15:10:24 发布
阅读量1.2w 收藏 14
点赞数 1
文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_31255557/article/details/90054615
版权

div样式文件

<style>
    #div{
        width:200px;
        height:200px;
        background:blue;
        margin-bottom:20px;
    }
</style>

js代码

<body>
    <div id="div">123</div>
    <button οnclick="change()">改变div边框颜色</button>
    <script>
        function change(){
            var div = document.getElementById("div");    //绑定要改变的div，id
            div.style.border='1px double red';        //通过style.的形式改变上面<style>标签中的样式
            }
    </script>
</body>

lskisme
关注
  • 1
    点赞
  • 踩
  • 14
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
判断DIV内容更改 模拟 DIV　onchange
ufryyfdf的博客
11-13 5645
判断DIV内容更改 模拟 DIV　onchange
44 JS函数练习
Blog of Lytracy
09-18 421
文章目录
【编程题】编写函数实现点击change按钮，为div元素添加红色双线边框。
chen'blog
09-26 1万+
编写函数实现点击change按钮，为div元素添加红色双线边框。 先在body中编写一个div
js第4章函数 课后习题——编写函数实现单击change按钮，为div元素添加红色双线的边框
WHT869706733的博客
11-26 7005
填空题 函数“((a,b)=>a*b)(6,2);”的返回值是__12____。 JavaScript中函数的作用域分为全局作用域、_函数作用域_____和块级作用域。 表达式“[12, 15, 8].find(function(ele){return ele >=10})”的返回值是__12____。 判断题 函数showTime()与showtime()表示的是同一个函数。（ ×） 函数内定义的变量都是局部变量。（×） 匿名函数可避免全局作用域的污染。（ √） 选...
div内容变化事件
code_life666的博客
01-05 4567
找了恩久才找到： $("#d1").bind('DOMNodeInserted', function(e) { //do something }); change依然不行，它只适用于select和textarea，如果大家对div的监听事件有新的发现，还望不吝赐教。
按钮添加边框
huazang163的博客
09-06 745
[Button.layer setMasksToBounds:YES]; [Button.layer setCornerRadius:10.0]; //设置矩形四个圆角半径 //边框宽度 [Button.layer setBorderWidth:1.0]; //设置边框颜色有两种方法：第一种如下: CGColorSpaceRef colorSpace = CGColorSpac
dom 监听 div 监听 change事件
king1741622927的博客
04-26 4451
$("#selecteddisplayName").bind('DOMNodeInserted', function(e) {     alert(3443); }); http://blog.sina.com.cn/s/blog_b7c1a2e20102uxid.html
单个div元素实现双边框
weixin_30737363的博客
07-25 634
昨天被问到一个很有意思的问题，单个div元素怎么实现双边框，当时脑子懵了一下，然后就回答出来用伪元素，别的实在是想不起来了，所以在此总结一下子防止以后再被问到 总结了一下大约有以下几种方案: 　　伪元素实现 　　box-shadow 　　outline 下面我们来具体看看实现方法,为了看上去效果更好，我将直接使用VSCode里面的截图，各位想拉代码自己试试的，别想复制了，自己动...
判断DIV内容更改(模拟 DIV　onchange)
程序员写的技术 FAQ 和杂文
06-24 1万+
判断DIV的内容改变的方法     近日，在帮朋友写一段小程序的时候，用到了iframe,在iframe返回值的时候，我用parent.InputText.value=returnValue;时，javascript报错，说是找不到InputText ，我看了一下在form里，有这么一个Input框，而且id,name都设定了。为什么不能返回值呢？或者说为什么不能接收值呢？于是我用div试了
html内容改变后触发事件,在div更改时触发jQuery事件
weixin_36460310的博客
06-07 1040
小编典典您可以使用DOMNodeInserted和DOMNodeRemoved检查是否添加或删除了元素。不幸的是，IE不支持此功能。$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {if (event.type == 'DOMNodeInserted') {alert('Content added! Curren...
改变div php,改变DIV change
weixin_33463850的博客
03-18 69
摘要：changeDIV#box{width: 100px;height: 100px;backgchangeDIV#box{width: 100px;height: 100px;background: red;margin:20px 80px;}var boxwindow.onload=function () {box=document.getElementById('box')}functio...
javascript 动态给div添加事件
kogu的博客
03-14 6765
创建个div var title=document.createElement(); function onover(){alert("fsfs");} 如何动态给title添加事件呢，比如onmouseover 我试了 title.onmouseout=changeTitle();不可以 要怎样添加呢？ title.onmou
html div change,vue watch div width change
weixin_34738304的博客
06-17 155
.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-1.col-md-8.col-md-4.col-md-4.col-md-4.col-md-4.col-md-6.col-md-6'use strict'//http://vuejs.or...
用js给div绑定事件，实现点击切换效果的几种方式总结
Walden_tinghou的专栏
05-18 1万+
用js给div绑定事件，实现点击切换效果，总结有如下几种方式 script type="text/javascript"> function btnAction() { var titleNValue = document.getElementById("titleN").value; var complaintValue = document.getElem
给div添加onClick事件
weixin_30325971的博客
08-23 778
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>click_div</title> 5 <meta charset="utf-8"> 6 7 <style type="text/css"> 8 ...
jquery监听div等元素的内容变化
热门推荐
云_飞扬
03-07 3万+
方法一：change事件 change事件，在元素的值发生改变时触发，适用于文本域、textarea、select 。 或调用change()方法时可以监听。所以，我们可以模拟change为非表单元素监听change()事件。 change事件 #container { min-height: 120px; border: 1px solid
html 值修改时触发事件,在div更改时触发jQuery事件
weixin_28713083的博客
06-04 338
您可以使用DOMNodeInserted和DOMNodeRemoved检查是否添加或删除了元素。不幸的是，IE不支持这一点。$('#myDiv').bind('DOMNodeInserted DOMNodeRemoved', function(event) {if (event.type == 'DOMNodeInserted') {alert('Content added! Current co...
JavaScript监听change和input事件
最新发布
爱蹦跶的全栈大A阿
02-06 1943
在网页开发中,我们常需要对表单进行验证或增加额外交互逻辑。实现这些功能的关键就是能实时捕获表单元素的值变化。本文我们将具体讨论监听表单变化的两种事件:change和input事件,以及这两者的区别和应用场景。​change事件是在值改变且失去焦点后触发input事件是在值每次改变时立即触发根据需要选择合适的事件,input用于实时响应,change用于在终端变化时执行这样我们就可以根据具体场景选择合适的change或input事件来响应表单元素值的变化。
jQuery绑定事件的三种常见方式（bind、one、【change、click、keydown、hover】）
不动声色的小蜗牛的博客
07-19 2485
一、bind(type,[data],fn)：为每个匹配元素的特定事件绑定对应的事件处理函数。 也可以同时给一个元素绑定多个事件，我们来看一下例子： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-1.8.3.js" >&lt
编写函数实现单击change按钮，为div元素添加红色双线的边框
09-07
### 回答1： 下面是示例代码： HTML: ``` <button id="change">Change</button> <div id="target"></div> ``` JavaScript: ``` const button = document.getElementById('change'); const div = document.getElementById('target'); button.addEventListener('click', function() { div.style.border = "double red"; }); ``` ### 回答2： 编写一个函数，实现单击change按钮后为div元素添加红色双线的边框。可以通过JavaScript来完成这个功能。首先，我们需要定义一个函数，并在HTML中的change按钮上添加一个点击事件，触发该函数。 HTML代码： ```html <button onclick="changeColor()">Change</button> <div id="myDiv">这是一个div元素</div> ``` 接下来，我们在JavaScript中编写函数changeColor()，通过获取div元素的引用，使用style属性来改变边框的样式。 JavaScript代码： ```javascript function changeColor() { var myDiv = document.getElementById("myDiv"); myDiv.style.border = "2px solid red"; } ``` 在函数中，我们首先通过getElementById方法获取到id为myDiv的div元素的引用。然后，我们使用style属性来访问元素的样式属性，并将border属性设置为"2px solid red"，表示2像素宽度的红色双线边框。 最后，当点击change按钮时，就会触发changeColor函数，为div元素添加红色双线的边框。 ### 回答3： 你可以按照以下步骤编写函数来实现单击change按钮后为div元素添加红色双线的边框： 1. 首先，在HTML文件中找到对应的div元素，并给它设置一个id属性，例如`<div id="myDiv"></div>`。 2. 接下来，在JavaScript中编写一个函数，该函数会在单击change按钮时被调用。 3. 在函数中，首先通过`getElementById()`方法获取div元素的引用，例如`let divElement = document.getElementById("myDiv");`。 4. 然后，通过给div元素的`style`属性设置边框样式和颜色来添加红色双线的边框，例如`divElement.style.border = "2px solid red";`。 5. 最后，将函数与change按钮绑定，可以使用`addEventListener()`方法将函数绑定到change按钮的点击事件上，例如`changeButton.addEventListener("click", changeDivBorder);`。 综上所述，以下是完整的HTML和JavaScript代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Change Button Example</title> </head> <body> <div id="myDiv">这是一个div元素</div> <button id="changeButton">change</button> <script> function changeDivBorder() { let divElement = document.getElementById("myDiv"); divElement.style.border = "2px solid red"; } let changeButton = document.getElementById("changeButton"); changeButton.addEventListener("click", changeDivBorder); </script> </body> </html> ``` 当你点击change按钮时，你会看到div元素的边框被添加了红色双线。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值