CODEWITHSUNDEEP
htmlcsselement
Reza Mirdamadi
Reza Mirdamadi

Reputation: 13

How to modify an element attribute using jQuery or CSS?

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

Upvotes: 1

Views: 101

Answers (4)

msjupiter96
msjupiter96

Reputation: 44

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

Upvotes: 1

NIKHIL CHANDRA ROY
NIKHIL CHANDRA ROY

Reputation: 1087

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>

Upvotes: 0

DCR
DCR

Reputation: 15657

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>

Upvotes: 5

Ivan Karaman
Ivan Karaman

Reputation: 1234

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>

Upvotes: 0

Related Questions