How to modify an element attribute using jQuery or CSS?

Question

I am trying to change this:

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

and change the value of data width to: data-width="450"

I have more than 400 videos on my website and would like to use a shortcut to only change 380 to 450 for the value of data-width.

Would really appreciate if anyone can help me.

Thanks

DCR · Accepted Answer · 2020-08-19 14:50:54Z

5

first grab the elements dataset and check if 380, then if it is just grap the element by classname and style width to 450px.

I suspect though that you don't really want to set data-width and data-height, rather, set width and height and then access those directly.

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>

edited Aug 19, 2020 at 14:50

answered Aug 19, 2020 at 14:31

DCR

15.8k13 gold badges61 silver badges131 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Reza Mirdamadi Over a year ago

Thanks for your reply, I added the first line you sent + .viddler-auto-embed{ data-width:450px;} but no changes.

DCR Over a year ago

data-width is just an adhoc attribute. You need to set width. viddler-auto-embed{ width:450px; you may also want to set height

esqew Over a year ago

@RezaMirdamadi It may be worth noting that data-width is not a valid CSS attribute.

msjupiter96 · Accepted Answer · 2020-08-19 15:07:15Z

1

I'm not sure if it will work, but you can try this:

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

answered Aug 19, 2020 at 15:07

msjupiter96

444 bronze badges

1 Comment

Tomer Shetah Over a year ago

There is a "Run code snippet" where you can test your answer. I am pretty sure it doesn't work.

Ivan Karaman · Accepted Answer · 2020-08-19 14:50:25Z

There are two ways to do it, you can change it by using data or attr method, which one will work for you depends on how this prop will be read by the plugin. You can try and then choose suitable for you.

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

NIKHIL CHANDRA ROY · Accepted Answer · 2020-08-19 14:58:23Z

0

Just change data-height or data-width attribute value whatever you want with jquery.

$(()=> {
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>

answered Aug 19, 2020 at 14:58

NIKHIL CHANDRA ROY

1,12914 silver badges19 bronze badges

Collectives™ on Stack Overflow

How to modify an element attribute using jQuery or CSS?

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related