Change custom HTML attribute with jQuery

Question

What if I had somthing like this

<div class="fb-like-box" data-href="" data-width="292" data-show-faces="true" data-stream="true" data-header="false" colorscheme="light"></div>

and I wanted to use jQuery to change the attribute "colorscheme" to colorscheme="dark" and change "data-header" to data-header="false" so on and so fourth.

These changes would need to happen when clickong on a button or image or some other type of action... I can get the action part down its just how would I call for change for those specific variables if you will.

I also need help changing all the other ones like data-href, data-width, and data-show-faces

Huge Thanks In Advance!

Vinee · Accepted Answer · 2012-11-22 06:17:37Z

1

First, you should write the click event over button or image like

$('#buttonID').click(function(){
    $(".fb-like-box").attr({ "data-href": "#", "colorscheme":"dark", "data-value": "I was updated" });
});

Attribute of div will update only when you click on the selected button.

answered Nov 22, 2012 at 6:17

Vinee

1,6523 gold badges26 silver badges38 bronze badges

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

Comments

Vladislav Qulin · Accepted Answer · 2012-11-22 06:07:42Z

0

You can change any attribute by using jquery .attr() method.

If you are having troubles with minus symbol in attribute name, you can escape it with "". Like this:

$("#SomeId").attr({ "data-href": "javascript:void(0)", "data-value": "oh hi there!" });

answered Nov 22, 2012 at 6:07

Vladislav Qulin

1,9321 gold badge17 silver badges20 bronze badges

Collectives™ on Stack Overflow

Change custom HTML attribute with jQuery

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related