I'm trying to override a style within a javascript form from Little Green Lights.
I can override the width within Chrome inspect, but I can't duplicate the override from my style sheet.
I thought at first I wasn't being specific enough, so I tried just putting a border around the table element but it doesn't work, which implies that the css override can't affect js code.
Am I overlooking something? Can this be done?
The code I'm using to override is
table[style] {
width: 400px !important;
}
Your selector is assuming that the table has a style attribute. If it hasn't then the width won't be set by your stylesheet entry, but it could be set by some other imported stylesheet.
When you add a style direct to the element in the browser inspect tool then the table does get a style attribute.
Here's a simple example. Table 1 has no width set and Table 2 has because it had (an albeit otherwise empty) style attribute so your selector worked.
const table1 = document.querySelector('#table1');
console.log(window.getComputedStyle(table1).width);
const table2 = document.querySelector('#table2');
console.log(window.getComputedStyle(table2).width);
table[style] {
width: 400px !important;
}
<table id="table1">
</table>
<table style="" id="table2">
</table>
Your CSS selector doesn't even work. If the syntax is right and it has !important attached to it, it will override the javascript:
const table = document.querySelector('table')
table.style.backgroundColor = 'blue'
table
{
background: red !important;
}
<table>
<tr>
<td>Table cell</td>
</tr>
</table>
Good comments have been presented.
The style of your <table> element:
is an inline CSS
(style attribute of an HTML element)
hence, it overrides any internal CSS
(defined in the <head> section of an HTML page within a <style> element)
also overrides any external CSS
(linked to it in the <head> section of each HTML page)
However, JS should override all above mentioned CSS options, unless they have the !important attribute set in their CSS.
Therefore, as mentioned in comments already, we should avoid !important whenever possible.
document.querySelector('table').style.width = '200px'
Just make sure to apply above JS command after your template Little Green Lights has fully created its DOM elements (the table in this case), which does not have the !important attribute set originally according to your screen shot.
Run code snippet
function changeWidth() {
document.querySelector('table').style.width = '200px';
}
<button onclick="changeWidth()">.style.width = '200px'</button>
<table style="height: 100px; width: 100px; border: 2px solid #eee" width="559">
<tr>
<td>test</td>
</tr>
</table>
All the suggestions addressed the override, but the problem turned out to be unsolvable with css, as evidently, the lgl js execution takes place after the css overrides are implemented. I proved this by wrapping border code with html that included the lgl script. The border showed, but did not include the lgl code. I did not try the js solutions, as it ended up being easier to change the lgl code and give up on trying to manipulate it externally.
Related
I'm looking for a solution primarily supported by Webkit browsers (Chrome / Edge / Safari) that allows table columns to change the actual width of these columns when the resize property is set in a contenteditable field. Now here's what I've done so far.
I've added the resize handles in the first row of the columns by adding the following CSS (.editortable is the class for the tables) :
.editortable tr:first-child td {
padding: 4px;
cursor:pointer;
resize:both;
border: 1px dotted #333;
overflow:auto;
}
This shows the resize handles in the contenteditable field, allowing for rescaling the table columns. But what it doesn't do, is set the new width and height in the underlying HTML by adding a "width" and "height" attribute with the appropriate values. How can this be done in either vanilla javascript or JQuery?
Sorry for my English, it's not my native language. I hope you guys understand what I'm trying to accomplish here.
<div contenteditable="true">
<table class="editortable">
<tr>
<td>1</td><td>Just some text</td>
</tr>
</table>
</div>
Here's the fiddle; https://jsfiddle.net/7trwxoug/
I think you need MutationObserver, I added example code to watch the change of second td, you can watch any cell as you like, after watch whenever you resize a cell, the callback can get the latest widht/height, and you can set/log or other action according to widht/height and id you get
https://jsfiddle.net/46tamyzp/10/
I need to get all the css applied to an element by id or by class
I need the css custom css only
I have this function which returns all css including the browser default built in css, i need only the applied css, like how firebug would work.
Firebug is not sufficient for me to use as i need the data to be exported into json eventually and used in various ways.
This needs to be a javascript or jquery solution only.
This is what i have so far
<div id="elemId" style="border:1px solid red;">
var elem1 = document.getElementById("elemId");
var style = window.getComputedStyle(elem1, true);
console.log(style);
So in general i need to know what css has been applied to this object i need all external and inline css. i cannot use a single getProperty by name because in most cases i do not know what has been applied, i need the full list of custom css.
Please only submit code you have tested yourself, dont paste from other forums without testing code.
Thanks
Daniel
So when you say "default browser css", I believe you are seeing all applicable css rules when you run console log your style variable. If you want to see all css that was applied via stylesheet, jqyery, inline css, etc, use cssText:
HTML
<div id="elemId" style="border:1px solid red;">
JS
var elem1 = document.getElementById('elemId');
console.log(elem1.style.cssText);
Output will be
border: 1px solid: red;
jsfiddle
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;
}
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.
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.