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

Question

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.

If it is not in the initially loaded HTML code, then it will most likely be added by some kind of script (I assume you look at the element in some kind of DOM inspector and see the top value there?). — C3roe
– C3roe, Commented Oct 17, 2013 at 8:40

Rituraj ratan · Accepted Answer · 2013-10-17 08:39:21Z

4

first add position absolute or relative to see changes

in javascript

html

<body onload="myFunction()">

js

<script>
function myFunction()
{
 document.getElementById("headerTop").style.top = "470px";
}
</script>

in jquery no need to add in body tag

$(document).ready(function(){

$("#headerTop").css("top","470px");
});

answered Oct 17, 2013 at 8:39

Rituraj ratan

10.4k8 gold badges38 silver badges55 bronze badges

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

5 Comments

Fizzix Over a year ago

Unfortunately, no change :(

Rituraj ratan Over a year ago

make position absolute or relative to see effect

Fizzix Over a year ago

Changing between absolute and relative make no difference

Rituraj ratan Over a year ago

now remove myfunction in body it will work because you add jquery code so need to add myfunction i have also mention in my answer it

Fizzix Over a year ago

As you can see, I got it working with @netbrain code. Although, when you visit a different page, then revisit the home page, the image is back to its original position. I uploaded the updated copy of index.html.

Dhaval Marthak · Accepted Answer · 2013-10-17 08:46:21Z

2

You need to set position:relative

You can set top,left, right, bottom with positioned elements

So either set position:relative or absolute according to your need.

Example

Update

As you are saying you already applied position:relative, then try writting script just before </body> and see what happens.

edited Oct 17, 2013 at 8:46

answered Oct 17, 2013 at 8:41

Dhaval Marthak

17.4k6 gold badges48 silver badges69 bronze badges

3 Comments

Fizzix Over a year ago

It already has position: relative; within my style-sheet. Sorry, should have mentioned that.

Dhaval Marthak Over a year ago

Well your URL is having an error myfunction() is not defined. Remove it from body onload()

Fizzix Over a year ago

Whoops, forgot to remove that earlier. Thanks. I need to somehow go into the DOM with Firebug or something to find out what script is actually making these calculations on positioning the H1

netbrain · Accepted Answer · 2013-10-17 08:42:37Z

1

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.

answered Oct 17, 2013 at 8:42

netbrain

9,3046 gold badges44 silver badges69 bronze badges

3 Comments

Fizzix Over a year ago

Not ideal... But it worked! I can live with this, mainly since I have a load animation that occurs while the main parts of the site are loading such as images. Great, thanks for your help!

Fizzix Over a year ago

Although, since my website works with AJAX, when the home page is revisited, the h1 is back into its original position. Therefore, this is only a temporary fix.

netbrain Over a year ago

Good luck in finding a more permanent solution. Try finding the culprit and remove it from it from the root.

sphair · Accepted Answer · 2013-10-17 08:49:48Z

1

The template probably hooks into the document onload function, or a jquery ready function, and does some calculation and adds the property.

The problem with overriding this is that you have to make sure you are doing it AFTER the template has done its work, otherwise the template will just overwrite your change.

By hooking into onload, you will probably be too early.

What about changing the template javascript code directly?

You could try to use the jquery ready function, but it depends if this is registered before or after the template if it will have any affect. document.ready() callbacks are called in the order they were registered.

$(document).ready(function() {
    $("#headerTop").css("top","470px");
});

Also, to position elements using top/left/right/bottom, you need to create a positioning context. This is easily done by adding set position:relative to your h1 element.

edited Oct 17, 2013 at 8:49

answered Oct 17, 2013 at 8:41

sphair

1,67015 silver badges29 bronze badges

1 Comment

Fizzix Over a year ago

Still no luck unfortunately :( But I think your suggestions are correct. I will need to find the source of what is doing the calculations and slightly edit them.

Prasad · Accepted Answer · 2013-10-17 08:49:34Z

0

using Jquery you can directly use css to set inline style $('#headerTop').css('top','470px');

answered Oct 17, 2013 at 8:49

Prasad

1,8127 gold badges23 silver badges29 bronze badges

Comments

Patrick Collins · Accepted Answer · 2022-07-24 02:29:33Z

I am uncertain if this is what might work, for this issue, but it solved my issue so I'm posting it to maybe help someone else. I wanted to use the display none so I would not take up room on the page , but display visible so my parent div would grow in height instead on the content spilling out on bottom so I used this javascript , hope it can help someone else.

function changeStyle7(){
    // Selecting element
    var elem = document.getElementById('change');    
   if( elem.className == "dropdown-content1"){elem.className = "dropdown-content";}      
else {elem.className = "dropdown-content1";}
}

Then just added the dropdown_content1 section to my style sheet with the visibility :visible instead of display:none now my parent div grows when i open the hidden div and of course add the onclick changeStyle7() to my button. almost forgot the html.

<div class="dropdown-content"id="change"> some stuff</div>

<style>
.dropdown-content {
  display: none;
  position: absolute;
  z-index: 1;
}
.dropdown-content1 {
  visibility: visible;
  position: relitive;
</style>

Collectives™ on Stack Overflow

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

6 Answers 6

5 Comments

3 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

5 Comments

3 Comments

3 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related