原生js获取自定义属性e.data
时间: 2023-09-09 15:01:17 浏览: 58
原生JS获取自定义属性`e.data`的方法如下:
1. 首先,我们需要获取到事件对象`e`,通常是在监听事件的回调函数中获取到。
2. 获取`e`对象的自定义属性`data`,可以通过`e`对象的`getAttribute()`方法来获取。例如:
```javascript
var data = e.getAttribute('data');
```
如果`e`是一个DOM元素的事件对象,可以改为:
```javascript
var data = e.target.getAttribute('data');
```
3. 其他方法可以使用`dataset`属性来获取自定义属性值。例如:
```javascript
var data = e.dataset.data;
```
这种方法适用于HTML5中的`data-*`属性。
4. 如果自定义属性`data`是在HTML标签的`data-*`属性中定义的,则可以直接通过`e`对象的`dataset`属性来获取。例如,如果自定义属性是`data-data`,则可以使用`e.dataset.data`来获取。
总之,原生JS获取自定义属性`e.data`的方法有多种,可以根据具体情况选择合适的方法来获取。
相关问题
原生video.js播放器怎么实现
原生video.js播放器的实现步骤如下:
1. 首先,在HTML文件中引入video.js的CSS和JS文件。
2. 在HTML文件中添加video标签,并设置其id和src属性,如下所示:
```html
<video id="my-video" class="video-js" controls preload="auto" width="640" height="264" data-setup="{}">
<source src="my-video.mp4" type='video/mp4'>
<source src="my-video.webm" type='video/webm'>
<p class="vjs-no-js">
To view this video please enable JavaScript, and consider upgrading to a web browser that
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
</p>
</video>
```
3. 在JS文件中初始化video.js播放器,如下所示:
```javascript
var player = videojs('my-video', {
controls: true,
autoplay: false,
preload: 'auto',
fluid: true,
playbackRates: [0.5, 1, 1.5, 2],
plugins: {
examplePlugin: {
option1: 'value',
option2: true
}
}
});
```
4. 可以通过player对象调用video.js提供的API来控制播放器的行为,例如播放、暂停、设置音量等,如下所示:
```javascript
player.play(); // 播放视频
player.pause(); // 暂停视频
player.volume(0.5); // 设置音量为50%
```
5. 可以通过监听video.js提供的事件来实现一些自定义的功能,例如监听播放结束事件,如下所示:
```javascript
player.on('ended', function() {
console.log('播放结束');
});
```
js获取原生table选中情况下的一行的数据
你可以使用以下代码来获取选中行的数据:
```javascript
// 获取 table 元素
var table = document.getElementById("myTable");
// 获取所有的行
var rows = table.getElementsByTagName("tr");
// 遍历所有的行,找到选中的行
for (var i = 0; i < rows.length; i++) {
// 如果该行被选中
if (rows[i].classList.contains("selected")) {
// 获取该行的所有单元格
var cells = rows[i].getElementsByTagName("td");
// 遍历所有单元格,获取数据
for (var j = 0; j < cells.length; j++) {
var data = cells[j].innerHTML;
console.log(data);
}
}
}
```
其中,"myTable" 是你的表格的 id,"selected" 是你自定义的选中行的 CSS 类名。你需要在表格中添加一个事件监听器,当选中行变化时,动态添加或删除该 CSS 类名来改变行的样式。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)