如何使用jQuery或CSS修改元素属性？

Question

我正在尝试改变这一点：

​

<script type="text/javascript" src="//static.cdn-ec.viddler.com/js/arpeggio/v3/build/main-built.js"></script>

<div class="viddler-auto-embed" data-embed-id="yLDrFKPE4u" data-video-id="b69c8ee1" data-width="380" data-height="285"></div>

​

并将data width的值更改为: data-width="450“

我有400多个视频在我的网站上，想使用一个快捷方式，只改变380到450的数据宽度的值。

如果有人能帮我的话我将不胜感激。

谢谢

Answer 1

首先抓取元素数据集并检查是否为380，然后根据类名和样式宽度将元素抓取到450px。

不过，我怀疑您并不是真的想设置data-width和data- height，而是设置width和height，然后直接访问它们。

​

var element = document.getElementsByClassName('viddler-auto-embed')[0].dataset;


if (element.width == 380)
document.getElementsByClassName('viddler-auto-embed')[0].style.width ='450px'

.viddler-auto-embed{
border:black solid 2px;
height:100px;}

<div class="viddler-auto-embed" data-embed-id="yLDrFKPE4u" data-video-id="b69c8ee1" data-width="380" data-height="285"></div>

​

Answer 2

我不确定它是否能工作，但你可以试试这个：

​

function widthChanger() {
    let videos = document.querySelectorAll('.viddler-auto-embed');
    let i = 0
    while (i < videos.length - 1) { // loop through all videos
        videos[i].setAttribute("data-width", 450); // changing the data here
    };
};

widthChanger(); // running the function

​

Answer 3

有两种方法可以做到这一点，你可以使用data或attr方法来改变它，哪一种方法对你来说是有效的，这取决于插件如何读取这个道具。你可以试一试，然后选择适合你的。

​

//first
$('.viddler-auto-embed').data('width', 450);
console.log(
  'viddler-auto-embed: ',
  $('.viddler-auto-embed').data()
);

//second
$('.viddler-auto-embed1').attr('data-width', 450);
console.log(
  'viddler-auto-embed1: ',
  $('.viddler-auto-embed1').data()
);

.viddler-auto-embed {background: #eee;}
.viddler-auto-embed::before {
  content: attr(data-width);
  color: red;
}

.viddler-auto-embed1 {background: #777;}
.viddler-auto-embed1::before {
  content: attr(data-width);
  color: white;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="viddler-auto-embed" data-embed-id="yLDrFKPE4u" data-video-id="b69c8ee1" data-width="380" data-height="285"></div>

<div class="viddler-auto-embed1" data-embed-id="yLDrFKPE4u" data-video-id="b69c8ee1" data-width="380" data-height="285"></div>

​