How do I Change JSON Object using Javascript

Question

I have the following line in my code. It was generated by my IDE. Basically this line consists of a div which acts as an animated sidebar. The width of the sidebar is represented by the 'v' parameter (set here at 85).

<div id="sidebar" class="inner-element uib_w_5 uib_sidebar rightbar bar-bg thumb-bg bar-gutter" data-uib="layout/right_sidebar" data-ver="1" data-anim="{'style':'overlap', 'v':85, 'side':'right', 'dur':200}">

I would like to change the value of 'v' to 250 using a Script Tag.

I tried to insert the following script to overwrite the above data-anim attribute but it did not work.

<script>
 document.getElementById("sidebar").jsonObj['data-anim'] = "{'style':'overlap', 'v':250, 'side':'right', 'dur':200}"
</script>

Any ideas as to what's wrong with my <script> tag ?

ozil · Accepted Answer · 2016-01-13 07:18:57Z

1

use setAttribute of the sidebar element

it should be

var sidebar = document.getElementById("sidebar");
sidebar.setAttribute( "data-anim" , "{'style':'overlap', 'v':250, 'side':'right', 'dur':200}" );

read up this setAttribute documentation as well

document.getElementById("sidebar").setAttribute("data-anim", "{'style':'overlap', 'v':250, 'side':'right', 'dur':200}");

var abc = document.getElementById("sidebar").getAttribute("data-anim");

alert(abc);

<div id="sidebar" class="inner-element uib_w_5 uib_sidebar rightbar bar-bg thumb-bg bar-gutter" data-uib="layout/right_sidebar" data-ver="1" data-anim="{'style':'overlap', 'v':85, 'side':'right', 'dur':200}">

edited Jan 13, 2016 at 7:18

ozil

7,1639 gold badges38 silver badges61 bronze badges

answered Jan 13, 2016 at 7:12

gurvinder372

68.6k11 gold badges78 silver badges98 bronze badges

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

Comments

Mr Lister · Accepted Answer · 2016-01-17 22:55:54Z

0

I found the answer to my own question.

Here is the <script> that will work:

document.getElementById("sidebar").dataset.anim = "{'style':'overlap', 'v':250, 'side':'right', 'dur':200}";

edited Jan 17, 2016 at 22:55

Mr Lister

46.8k15 gold badges118 silver badges156 bronze badges

answered Jan 13, 2016 at 7:18

DanB

111 bronze badge

Collectives™ on Stack Overflow

How do I Change JSON Object using Javascript

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