CODEWITHSUNDEEP
javascriptjquerycssgoogle-chromeprinting
wardtwits
wardtwits

Reputation: 13

Dynamically change CSS won't work in Chrome

I have a page that is receiving a big left margin from a global style sheet that I'm not allowed to change. The margin is actually written inline by the script/stylesheet so I can't change it in my print style. I was able to find a jQuery solution that seems to work in FF and IE, but unfortunately not in Chrome. jquery function: 

$('#page').each(function(idx,el){
  el.style.margin='';
});

I've tried everything from the jquery css.('margin-left','0') to using the DOM attributes and nothing works! Any help is much appreciated.

document.getElementById("page").style.margin="0";
document.getElementById("page").setAttribute("margin","0");
document.getElementById("page").setAttribute("margin-left","0");

Upvotes: 1

Views: 3242

Answers (2)

dknaack
dknaack

Reputation: 60468

Description

If you are using jQuery, you should use the jQuery functions because there are made for cross browser compatibility.

The Problem is that you are using an id. A id should be unique in your document. jQuery knows that you are using the id selector and changes only the first element.

Use a class instead. Check out the jsFiddle demonstration i have created.

Sample

Css

.page { margin: 10px }

jQuery

$('.page').css("margin", "");

More Information

Update

w3c says: The id attribute specifies a unique id for an HTML element (the id attribute value must be unique within the HTML document).

But ok, you said that the page is an existing one and you want not change from id to `class. That is not standard and not good for search engine optimization.

You can do this to get it work with id.

Sample

Html

<div style="margin: 10px" id="page">div1</div>
<div style="margin: 10px" id="page">div2</div>

jQuery

$('[id="page"]').css("margin", "");

Upvotes: 2

Pavan
Pavan

Reputation: 4329

If margin is not marked with !important in your global style sheet, and if you are allowed to write css styles in your page, then try setting the margin in your page as below

#page {
    margin: 0px !important;
}

Upvotes: 1

Related Questions