Question

158

How to change a specific inline style from a HTML element?

rated 0 times [ 159] [ 1] / answers: 1 / hits: 28759 / 11 Years ago, thu, october 17, 2013, 12:00:00

So basically, I am simply trying to change an inline style from a HTML element that I have.

For example, my h1 tag:

<h1 id=headerTop style=width: 500px; max-width:none; top: 234px;>Something goes here</h1>

I am trying to change top to something different after my page is loaded. Therefore, I am trying to use this piece of Javascript just before the closing of my body tag:

<script>

     document.getElementById(headerTop).style.top = 470px;

</script>

Although, this makes no change.

I am trying to do this since my h1 element originally has no top attribute within my page source UNTIL it is loaded inside a browser. It is then given top: 234px;. Can't seem to find out why. I am using a purchased template from another site, so there must be something somewhere that is causing this to happen. The top attribute is DEFINITELY being added inline.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

diane

Add To Favorites

Follow

Total Points: 264

Total Questions: 104

Total Answers: 95

Location: Liechtenstein

Member since Wed, Dec 8, 2021

3 Years ago

answered 11 Years ago kamronr · Accepted Answer

The jquery way would be:

<script>

$(document).ready(function(){

  $('#headerTop').css({

    'top': '470px'

  });

})

</script>

This will change the css property top to 470px on the element with an id of headerTop

If you need to delay the javascript exection, you could do something like this:

<script>

$(document).ready(function(){

  setTimeout(function(){

    $('#headerTop').css({

      'top': '470px'

    });

  },1000)

})

</script>

This causes the execution to be delayed by 1 second.
Probably not ideal, but a solution nonetheless.