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

问题描述

我正在尝试更改此内容：

<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 =“ 450”

我的网站上有400多个视频，我想使用快捷方式将data-width的值仅更改为380到450。

如果有人能帮助我，我将非常感谢。

谢谢

解决方法

首先获取元素数据集并检查380，然后检查 只需按类名和样式宽度将元素抓取到450px。

我怀疑您并不是真的想要设置数据宽度和数据高度，而是设置宽度和高度然后直接访问它们。

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>

,

我不确定是否可以使用，但是您可以尝试以下方法：

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

,

有两种方法可以执行此操作，您可以使用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>

,

只需使用jquery更改data-height或data-width属性值即可。

item    value1
1       4/3/2
2       4/3
3       4
5       4/3/2/1
6       4/3
7       4/3/2

$(()=> {
let viddler = $('.viddler-auto-embed')
viddler.css({
"width": `${viddler.attr('data-width')}px`,"height": `${viddler.attr('data-height')}px`
})
})

.viddler-auto-embed{
  border: solid
}