Overriding CSS from element.style created by server side JS - javascript

I have a reference to a server side JS file that dynamically creates divs on my page. I am trying to override the css that is inline for the divs that are created but I have not been able to do so.
I have tried !important and the style that is created by the JS still trumps everything I do.
When i look at the style in the developer console of chrome it shows element.style as being the style that "won" over my style
I do not have access to edit the JS file on the server.
I place this in my page and it dynamically creates the divs and styles them.
<head>
<style>
#id
{
background-color: blue; !important;
display:block; !important;
}
.class
{
background-color: blue; !important;
}
</style>
</head>
<script src="http://xxx/xxx/xxxxx/xxxx.ashx?blank=xxxx" type="text/javascript" charset="utf-8"></script>

You can create your own javascript to restyle the divs created by the server javascript.

The CSS !important tag does sound like your answer here but sometimes you need to ensure your CSS declaration is specific enough to the element, i.e.:
<div>
<a style="color:#F00;">A Link</a>
</div>
If I apply the below CSS the inline style or #F00 will still win:
div {color:#fff !important;}
But if I am specific with my CSS declaration i.e:
div a {color:#000 !important;} <--Notice the 'a' tag
Then my link will be #000. This does not matter if the link was loaded in with JavaScript or not.
See my JSFiddle Example: http://jsfiddle.net/zqpy0r6c/
More technical info can be found at
When does CSS's !important declaration not work?

The CSS given in the style attribute on an element always wins over the stylesheets. The best option to override this CSS is to edit the style attribute using some JS:
<script>
function clearInlineStyling(element){
element.style= null;
}
</script>
Next you have to watch the html for your script to add new elements, find them and remove their styling. I would suggest JQuery for this.

Related

How to overwrite a div (html body, sets background) in an iFrame from local domain using jquery?

The CSS I'm trying to remove from the iFrame (colours.css in phpbb)
html, body {
color: #536482;
background: url("../path/to/background.jpg") repeat-x #8fe909;
}
The iFrame:
<iframe id="commentframe" scrolling="no" name="commentframe" onload="iframeLoaded()" src="/forum/viewtopic.php?f=13&t=10">
This is also wrapped up in a div named #commentdiv just for easier handling of the span region. Here is also iframe-loaded, though I think it's irrelevant, people often ask for anything related to the code going on
<script type="text/javascript">
function iframeLoaded() {
var iFrameID = document.getElementById('commentframe');
if(iFrameID) {
// here you can make the height, I delete it first, then I make it again
iFrameID.height = "";
iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + "px";
}
}
</script>
As I understand it, I need to use the .has() jquery function to achieve this task by specifying a CSS class somewhere
.commentsbg {
background-color: transparent;
background: transparent;
}
Then the .has function something like this.
<script type="text/javascript">
$("body").has("iframe").addClass('commentsbg');
</script>
I also tried
<script type="text/javascript">
$("commentdiv").has("iframe").addClass('commentsbg');
</script>
as well as trying them in my string of .on('load', function)s. Honestly, I'm just very very confused as to where any of this is supposed to go. Does the js/jquery go in the CSS file (does this ever happen?)... And does the CSS go in colours.css (the original css file of the iframe)? I'm so lost on this one and been at it for quite some time.
There's a few things to comment:
<script type="text/javascript">
$("commentdiv").has("iframe").addClass('commentsbg');
</script>
Here you forgot the identifier or class for your commentDiv, so your function will not work (# for id and . for classes):
$("#commentdiv").has("iframe").addClass('commentsbg');
or
$(".commentdiv").has("iframe").addClass('commentsbg')
However, I think your are not approaching correctly to what you want to achieve. You can act directly to your desired tag.
Afterwards, CSS properties should modify CSS, so it's better to add a class to your <iframe> when it's loaded if you want and change it's properties in your CSS.
Your code is redundant, with background: transparent and with background-color: transparent, it's better to use:
.commentsbg {
background-color: transparent !important;
}
However, you can act directly to your <iframe> in your CSS, adding !important to remove default styles.
To simplify and summary things, you should modify the background of your iframe, firstly in your CSS (adding !important if needed, because JavaScript will load more your website).
If this doesn't work, try adding a class when you need (onload for example) and modify it's CSS.

jQuery: get inline style not CSS of body

I'm trying to get the real style of an inline element but it's always getting the css applied to it. I don't want to modify my CSS, too many pages depend on it.
<body class="processed" style="padding-top: 157px ;margin-top: 0px;">
My CSS
.processed{padding-top: 56px !important;}
JS:
$(function(){
var pad = $('body').css('padding-top');
$('body').attr('style','padding-top:'+ pad +' !important; margin-top: 0px;');
console.log('pad' + pad);
});
The result: body with inline style 56px, instead of 157px...
You could create a second "important" class in the CSS file, so it wouldn't affect those other pages, but it would override that first "important" class.
You just have to write that new class after the first one.
For example:
HTML:
<body class="processed processed-large-top">
CSS:
.processed{padding-top: 56px !important;}
.processed-large-top{padding-top: 157px !important; margin-top: 0px;}
Solved, the problem was an script overriding styles after DOM ready...the !important played a good role..
A CSS rule with !important have higher priority than inline styles. To override it, you have to use !important also on the inline style CSS.
So, your HTML tag have to end up like this:
<body class="processed" style="padding-top: 157px !important;margin-top: 0px;">

Responsive image in CMS

I have problem with CMS. I need to change css that the page could be responsive.
One of the div has data-height, data-weight and height, width in style in html that it looks like that
div class="classOf" id="idOf" data-width="755" data-height="125" style="width: 755px; height: 125px;"
I can't use my new css due to is not working if I select this id and change properties.
This is CMS so I can only console to append new css and js.
My question is how to neutralize this set properties on html and apply css with max-width:100%
that will work ?
Try to include your own customized css at the end of the html document, it will override any existing css file included before.
In your css add !important to the width attribute, it should over-ride the inline style.
Example:
.classOf{
width: 100% !important;
}

conflict between the same class or id of multiple css files

Is there any way to stop the conflict between same class or id of multiple css files. As I am explaining below for better understanding:
There is a master web page which has several <div> but there is a <div class"dynamic"> which always reload the contents including css files. Let's suppose if any class of master page has the same name to reloaded elements' class while properties are different. Then how should I handle this to stop the conflict.
master.html
<html>
<head> //attached master.css file here </head>
<body>
<div class="myClass"> </div>
<div class="dynamic"> /* often reload elements by ajax */ </div>
</body>
</html>
master.css
.myClass { height: 100px; width: 150px; background : red;}
.dynamic { height: 200p; width: 200px; }
now i am showing the reloaded html elements & css files into dynamic div of master page
reloaded tag line by ajax : <div class"myClass"> </div>
reload.css
.myClass{height: 30px; width: 25px; background: yellow; }
Now as you can see there are two classes with same name but different properties. Then how should I stop the confliction?
#Edit Thanks everyone for your support & time but my problem is different here.
the dynamic reloaded contents & css files are streaming from the client/user machine while master html page & it's css streaing directly from server.
so whatever the contents loads in dynamic div, it's coming from client side (e.g. tag lines & css, js). in that case i am not able to handle the css file which is just reloaded by ajax() so i think it can be sort out using js/jQuery fn().
You could apply the cascading rules of the CSS:
In your case, div.myClass inside div.dynamic should override div.myClass belongs to the body.
you adjust the reload.css rules to
.dynamic .myClass{height: 30px; width: 25px; background: yellow; }
The cascading rules which are applied when determine which rules should apply to html div could be referenced here
Updated 11.23
As the OP only have control over master.css, the above solution won't work. Thus, I suggest use child selector to limit the CSS rules to only the outer div.myClass. Modify the rule in your master.css to:
body > .myClass {...}
This rule will only apply to the .myClass which is the child of body. It leaves the spaces of styling for inner .myClass div.
Option 1: A more specific selector
.dynamic .myClass { }
This selector selects the .myClass element that is a descendent of .dynamic.
.dynamic > .myClass { }
This selector selects the .myClass element that is a direct child of .dynamic.
Option 2: Inline CSS
<div class="dynamic">
<div class="myClass" style="background-color: yellow;"></div>
</div>
Option 3: Use a different class.
UPDATE
If you want to avoid the previous defined property to be overwritten by a later defined value, you can use the !important syntax.
.myClass { background-color: red !important; } /* Sets the property to red */
.myClass { background-color: yellow; } /* Property is NOT overwritten */
If I understand your question correctly, this should sort it.
So you should add !important to the properties that seem to be overwritten.
div.myclass { ble ble }
div.main div.myclass { ble ble }
<body>
<div class="myclass"></div>
<div class="main><div class="myclass"></div></div>
</body>
Whichever css class of the same name is loaded last will overwrite anything set by the earlier class. However, if you use an inline style attribute this will always take precedence over anything set by the css file (so using an inline style is one option).
You could also use different style names or clarify your style with tag names div.myClass or id's #myDiv.myClass.

Applying css with javascript overrides hover link style?

I have some JavaScript which is changing an image correctly but once it has been called, my a:hover CSS code no longer works.
Looking with firebug the following JavaScript creates this css rule:
element.style {
background-image:url(/content/images/side_partnershipsOver.png);
}
document.getElementById('partnerships').style.backgroundImage = "url(/content/images/side_partnershipsOver.png)";
How can I apply the JavaScript and not have the a:hover code overriden by the element.style rule?
As far as I know setting the element.style.backgroundImage is essentially the same as using an inline style.
<style type="text/css">
a { background: blue; }
a:hover { background:green; }
</style>
<a href="#" style="background:red;">link<a>
Unfortunately the inline style always wins. In the above sample the link will always be red. As Daniel White said jQuery would be very useful here. Although you may be able to get around this issue in two ways.
One, Generate the style using javascript to write a style tag
document.write("<style type='text/css'>#partnerships { background-image:url(/content/images/side_partnershipsOver.png);}</style>");
or two, Manually setup mouseenter/mouseleave events to handle your hover style
Update
or three, as pointed out by KevinUK, use the !important css tag to override the inline style set.
<style type="text/css">
a { background: blue; }
a:hover { background:green !important; }
</style>
<a href="#" style="background:red;">link<a>
I was also frustrated about this CSS js style gap so I build
methods to apply style from js with a CSS string
elm.jCSS(cssText);elm.jCSSPseudo(cssText,pseudoElt)

Categories

Resources