javascript code to change attribute

Question

I am trying to write a javascript code that would change the value of rect when a specific event occurs. I am thinking along the lines of document.getElementById("xxx").setAttribute.. but I am completely stuck. Any help would be greatly appreciated!

The html code I have is this.

var x = document.getElementById("some integer").value;

<div id="xxx" style="position: absolute; left: 500px; top: 520px; width: 220px; height: 10px; clip: rect(0pt, 10px, 10px, 0pt); background-color: rgb(0, 0, 255);">

I want to set the second value in rect, ie (10px) to xpx.

so for example it is currently rect(10px, 10px, 10px, 10px) and I want to change it to rect(10px, Zx, 10px, 10px) where z is an integer — Paul
– Paul, Commented Jun 21, 2011 at 16:55
I understand now. You want to change a CSS property of an element. That is different from an attribute. E.g. style or id are attributes. — Felix Kling
– Felix Kling, Commented Jun 21, 2011 at 16:57

James Allardice · Accepted Answer · 2011-06-21 16:51:42Z

1

document.getElementById("xxx").style.clip = "rect(10px, 10px, 10px, 10px)"; should do the trick.

The clip property is a CSS property, so you need to use the style property of the DOM element to set it.

answered Jun 21, 2011 at 16:51

James Allardice

166k22 gold badges335 silver badges316 bronze badges

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

Comments

Anish · Accepted Answer · 2011-06-21 16:54:14Z

0

This is my one suggesion..

document.getElementById("xxx").setAttribute('onclick', function() {document.getElementById("xxx").style.clip="rect(0px 75px 75px 0px)"; });

or try this...

document.getElementById("xxx").style.clip="rect(0px 75px 75px 0px)";

answered Jun 21, 2011 at 16:54

Anish

2,9371 gold badge24 silver badges45 bronze badges

3 Comments

Paul Over a year ago

what if I have z = 100 and I want to set the value to that. Do I do: document.getElementById("xxx").style.clip="rect(0px " +Z+"px" + "75px 0px)"?

Paul Over a year ago

what if I have z = 100 and I want to set the value to that. Do I do: document.getElementById("xxx").style.clip="rect(0px " +Z+"px" + "75px 0px)"?

Felix Kling Over a year ago

@Paul: That is the same comment as before?

James R. · Accepted Answer · 2011-06-21 18:10:26Z

0

You could try something like this, so that you can change any/all of the clip settings:

function changeClipTo(t,r,b,l,elementID) {

var clipString = "rect(" + t + "px " + r + "px " + b + "px " + l + "px)";
document.getElementById(elementID).style.clip = clipString;

}

That way you can have any click event supply your desired values such as onclick="changeClipTo(0,50,10,0,'someElement');" or href="javascript:changeClipTo(0,50,10,0,'someElement');"

If you don't know the dimensions ahead of time, then you could use the onclick/href to call a function which determines the value you need, then call changeClipTo() from that function, passing in the computed value(s).

answered Jun 21, 2011 at 18:10

James R.

1

Collectives™ on Stack Overflow

javascript code to change attribute

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related