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

【问题标题】：How to modify an element attribute using jQuery or CSS?如何使用 jQuery 或 CSS 修改元素属性？
【发布时间】：2020-08-19 14:25:41
【问题描述】：

我正在尝试改变这一点：

<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。

如果有人可以帮助我，我将不胜感激。

谢谢

【问题讨论】：

标签： html css element

【解决方案1】：

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

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

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;}

&lt;div class="viddler-auto-embed" data-embed-id="yLDrFKPE4u" data-video-id="b69c8ee1" data-width="380" data-height="285"&gt;&lt;/div&gt;

【讨论】：

感谢您的回复，我添加了您发送的第一行 + .viddler-auto-embed{ data-width:450px;} 但没有任何更改。
data-width 只是一个临时属性。您需要设置宽度。 viddler-auto-embed{ 宽度：450px;您可能还想设置高度
@RezaMirdamadi 值得注意的是，data-width 不是有效的 CSS 属性。

【解决方案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

【讨论】：

有一个“运行代码 sn-p”，您可以在其中测试您的答案。我很确定它不起作用。

【解决方案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>

【讨论】：

【解决方案4】：

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

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

.viddler-auto-embed{
  border: solid
}

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

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

【讨论】：