JS:通过getAttribute() / setAttribute()更改元素属性值实现点击更改按钮状态

在Laravel环境中,通过JavaScript的getAttribute和setAttribute方法,可以实现点击按钮时更改其状态。首先,为HTML按钮元素添加自定义属性values,并根据后端数据设定初始状态。然后,设置点击事件clickss,当按钮被点击时,该事件会改变按钮的values属性,从而更新按钮的视觉状态。这种方法在涉及前后端交互的场景中特别有用。

1.前提:
代码环境:laravel  
 需求:更改html某一组件状态(我这里是按钮)
 重点:   两个方法 getAttribute()    setAttribute()

2.实现: 
按照需求给组件添加自定义属性(可加可不加,根据具体情况,也可以用自身属性),我这里需要改变的是按钮状态,所以在
当前button 增加一个自定义属性values。

加载页面初始显示根据代码中的判断条件显示按钮的values属性和按钮字体

通过按钮点击事件clickss()实现按钮状态的改变

HTML

```
           <button οnclick="clickss({ {$paper->id}},{ {$paper->is_paper_questions}})" id="{ {$paper->id}}change_btn" @if($paper->is_paper_questions==1) class="layui-btn layui-btn-sm layui-btn-danger" values="remove"@else class="layui-btn layui-btn-sm layui-btn-normal" values="add" @endif > @if($paper->is_paper_questions==0)添加@else 移除 @endif
           </button>
```

JS<

要在Dreamweaver (DW) 中通过 JavaScript 实现点击按钮控制视频的放大和缩小功能,可以按照以下步骤操作: ### 步骤解析 #### 1. 创建HTML结构 首先,在 HTML 文件中嵌入一个 `<video>` 元素用于显示视频,并添加两个按钮分别负责“放大”和“缩小”的功能。 ```html <video id="myVideo" width="640" height="360" controls> <source src="your-video-file.mp4" type="video/mp4"> </video> <button onclick="resizeVideo(50)">放大</button> <!-- 点击按钮让视频变大 --> <button onclick="resizeVideo(-50)">缩小</button> <!-- 点击按钮让视频变小 --> ``` 这里 `onclick` 属性指定了当用户点击每个按钮时应触发的动作,即运行指定大小变化幅度值作为参数传递给函数 `resizeVideo()` 的命令。 #### 2. 编写JavaScript代码 接下来编写一段简单的JavaScript脚本处理这两个按钮的功能请求。 ```javascript function resizeVideo(deltaSize){ var videoElement = document.getElementById("myVideo"); // 获取当前宽度高度数值并转换为整数形式 let currentWidth = parseInt(videoElement.style.width || videoElement.getAttribute('width')); let newWidth = currentWidth + deltaSize; if(newWidth > 0){ // 防止尺寸变为负数导致错误渲染效果。 videoElement.setAttribute('width',newWidth); // 根据比例同步调整高度保持原宽高比不变 const aspectRatio = 9 / 16; // 这里假设所有视频都遵循常见16:9的比例规则。 let updatedHeight = Math.floor(newWidth * aspectRatio); videoElement.setAttribute('height',updatedHeight); } } ``` 上述代码定义了一个名为 `resizeVideo` 的函数。它接受一个表示每次更改多少像素单位 (`deltaSize`) 的输入变量,并据此修改目标视频元素的实际展示尺寸属性——包括其宽度以及相应的高度维持原有纵横比率一致性的设置过程也包含其中。 --- ### 注意事项 - 如果页面中有多个视频,则需要更精确地选择哪个特定实例受到影响;此时可以通过ID或者其他唯一标识符进一步限定作用范围。 - 考虑到跨浏览器兼容性和用户体验优化等问题,在实际项目部署前还需测试各种极端情况下的行为表现是否正常合理。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值