CODEWITHSUNDEEP
javascripthtml
Paul
Paul

Reputation: 197

javascript code to change attribute

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.

Upvotes: 0

Views: 361

Answers (3)

James R.
James R.

Reputation: 1

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

Upvotes: 0

Anish
Anish

Reputation: 2917

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)";

Upvotes: 0

James Allardice
James Allardice

Reputation: 165941

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.

Upvotes: 1

Related Questions