【问题标题】: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】:

    有两种方法可以做到这一点,您可以使用dataattr 方法更改它,哪一种适合您取决于插件如何读取此道具。你可以尝试,然后选择适合你的。

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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-01-08
        • 2017-10-13
        • 2012-06-19
        • 2021-05-27
        • 2018-03-29
        • 2016-06-25
        • 2021-06-25
        • 1970-01-01
        相关资源
        最近更新 更多