I have a div
<div class="blue>;
The class blue is:
.blue {
background-color: blue;
}
Now I know I can set the background color of the div in the console using:
$0.style.backgroundColor = "#ffcc00"
But what if I want to get the value of the background color for that element using the console?
It's possible you may want computed style:
var style = getComputedStyle(document.body, null); // Gets the style for a passed element and optional pseudo selecter (eg. :hover)
console.log(style.backgroundColor);
It's important to note that computed style is the rendered result. If you have multiple rules for the same element, this will only display the ones that have been applied.
You can do :
var blue = document.getElementsByClassName('blue')[0];
blue.style.getPropertyCSSValue('background-color');
or you do:
blue.style.getPropertyValue('background-color');
Related
I have a list of arrays in a table displayed using repeat.for. I need to display tr row in blue color when "receiving.supplier === Scrap Separated" and blue color row when the result is "receiving.supplier === Scrap Sorted". Is there any way I can do it with if.bind but for String that I got in network tab. Here is my network and code.
I think this is purely a CSS question. You can have CSS rules based on [data-supplier] and assign a different background color based on the value of the supplier property.
The example CSS rules can be as follows.
tr[data-supplier="Scrap Separated"] {
background-color: blue;
}
tr[data-supplier="Scrap Sorted"] {
background-color: green;
}
And then bind the data-supplier property in the markup.
<tr data-supplier="${recieving.supplier}">
...
</tr>
Note that you cannot possibly nest div directly under tbody as that will be evicted by browser being non-conformed element as per the expected schema.
I am using ag-grid 5.1.2
I've configured a getRowStyle function to set the background-color for certain items.
I've noticed that has overridden the 'selected row' color now, so when a row is selected the background will not change to indicate as such.What is the correct way to still let highlighted row color work with the custom getRowStyle. Here is the typescript for the rowStyle function:
self.customRowStyle = function (params: AgParams) {
if (!params.data.isShaded) {
return {
"background-color": "#CEDDDD",
};
}
return null;
};
In your CSSyou can choose not to target the selected row.
ag-Grid adds the class onto the row that is returned from your getRowStyle callback
It also adds .ag-row-selected for rows that get selected.
You can simply use CSS to only target not selected rows or even apply a different style to the rows that are both selected and have your custom class.
Here is an example:
CSS
.bg-red.ag-row:not(.ag-row-selected) {
background-color: red ;
}
OR different style for both selected and bg-red
.bg-red.ag-row {
background-color: red;
}
.bg-red.ag-row.ag-row-selected {
background-color: pink;
}
JS
rowClassRules: {
'bg-red': () => {
return true; // applies class bg-red to all rows
},
},
Here is a live running code example of this in action.
Also here is another live example that overrides row styles on click of a button, but this doesn't involve styling callbacks:
Is this what you are looking for?
Use the getRowClass gridOption instead of getRowStyle. Then in CSS set the appropriate styles for your background row and the brackground row when highlighted.
I am using AngularStrap, (TypeAhead), trying to make the substring in the matched items to stand out, like either make them bold (like jquery autocomplete) or change the background of the characters ta different color
California
Technical
I thought this should be possible by changing css (if I know they have a selector for the matched substring) Or use of template/$templatecache
no luck so far
EDIT: In this plnkr I can see the drop down menu items have user input highlighted/bolded but cannot see why and how it happens:
<input type="text" class="span3" ng-model="typeaheadValue" bs-typeahead="typeahead">
plnkr -> http://plnkr.co/edit/Yjff9DiLnGqi2x1E5D2q?p=preview
The typeahead dropdown menu items can be styled through .dropdown-menu a. Matched text is regexed' to <strong>match></strong> i.e style those through .dropdown-menu a strong. Example :
/* style the dropdown items */
.dropdown-menu a {
font-family : 'courier new';
font-size: 110%;
}
/* styling matched text */
.dropdown-menu a strong {
color: white;
background-color: red;
}
forked plnkr -> http://plnkr.co/edit/LpdRiH9DxeRiAib3MOnn?p=preview
i'm using
var btn = dom.byId("portAid");
btn.innerHTML=omsportAid;
btn.style.fontWeight = 'bold';
How to remove/hide the div(portAid)?
Possible duplicate:
Remove element by id
var element = document.getElementById("portAid");
element.parentNode.removeChild(element);
To remove it:
btn.style.display="none";
Or to simply hide it:
btn.style.visibility="hidden";
The difference is that with visibility: hidden the component will still take up space, but it will be invisible. Display:none removes the component and collapses the other components that surround it on the now empty space.
I want to select two or more markers in a chart and perform an action using their coordinates.
Selecting the points is the main problem since I didn't find anything on this topic and I'm not sure if it can be done.
I did something like this in a Pie Chart.
What I did was use "connectToPlot" to change the series color when the user click on it.
This is a resume of the work that I did: change series color when user click on it
See that when you click on the serie, the color changes to gray and if you click again the series returns to it original color (saved it in the attribute "originalColor").
pieChart.connectToPlot("default", function(evt) {
var shape = evt.shape;
var type = evt.type;
if (type == "onclick") {
var fillColor = "rgb("+shape.fillStyle.r+", "+shape.fillStyle.g+", "+shape.fillStyle.b+")"; console.log(shape.fillStyle);
if(shape.rawNode.getAttribute("originalColor")==null)
shape.rawNode.setAttribute("originalColor",fillColor);
var strokeColor = "rgb("+shape.strokeStyle.color.r+", "+shape.strokeStyle.color.g+", "+shape.strokeStyle.color.b+")";
if(fillColor=='rgb(238, 238, 238)'){
shape.setFill(shape.rawNode.getAttribute("originalColor"));
shape.setStroke(shape.rawNode.getAttribute("originalColor"));
}else{
shape.setFill('rgb(238, 238, 238)');
shape.setStroke(shape.rawNode.getAttribute("originalColor"));
}
}