Why am I unable to test for CSS styling like this:
if (document.getElementById("myText").style.outline == "10px solid black")
{
// Do something
}
or
if (document.getElementById("myText").style.match("outline: 10px solid
black"))
{
// Do something;
}
when I have:
#myText
{
outline: 10px solid black;
}
I assume getComputedStyle will help in finding the applied style
var elem1 = document.getElementById("myText"),
style = window.getComputedStyle(elem1, null);
console.log(style.outline)
#myText {
outline: 10px solid black;
}
<div id="myText">Text</div>
The style property will only return styles that are set on the element's style attribute or in javascript, so you won't see styles that applied separately by CSS.
Furthermore, there are multiple ways of expressing the same set of CSS properties, and the browser is generating a string that describes the current properties (rather than returning whatever string you used to set them). Therefore the browser can and will reorder the property values and/or convert them to other units (e.g. black -> rgb(0,0,0)) so testing for a particular string is never going to be reliable. E.g.
document.body.style.outline = "10px solid black"
console.log(document.body.style.outline)
Related
I want to build something that could consume a .css file return a function that would take an array of class names and return the styles that would apply to an element with those class names, as a JavaScript object. (Such an tool would be suitable for use with Glamor, Fela, or other CSS-in-JS technologies.)
E.g., if you have this CSS file:
.btn {
border: 1px solid gray;
}
.btn.primary {
background: blue;
border-color: blue;
}
.btn-group {
display: inline-block;
}
then you could do something like this:
import css from "./btn.css";
import applicableStyles from "applicable-styles"; // what I want to build
const btnStyles = applicableStyles(css, ['btn', 'primary']);
// Expected value:
{
border: "1px solid gray"
background: "blue";
border-color: "blue";
}
In this example, .btn-group gets ignored because we only asked what style would apply to .btn.primary.
This is new territory for me, but I know there are tools out there for parsing CSS. What libraries might be most promising to take a look at? (Or, does something like this exist already?)
This should be possible using some of the various npm packages out there.
For example, the css-object-loader package allows you to require a .css file, which is converted to an object with keys corresponding to the selectors, which you can then access.
p {
font-size: 14px;
}
h1 {
text-indent: 20px;
}
.centered {
width: 100%;
margin: 0 auto;
}
var selectors = require('./rules.css');
// Get the
selectors['.centered']
I've also seen SCSS destructured at import, like:
import {btn, primary} from './btn.scss';
but unfortunately I can't remember what loaders were used to do this.
I want to select a child element that has a specific background color.
For example, I have my parent #xxx (id) and it has lots of direct children. I want to select all the children from this parent #xxx that have bakground:#000
I searched a lot and couldnt find an answer. Could you help me? Something like this (of course it does not work):
#xxx > div(background:#000) {
}
You can't do this with css, but you can use jquery for that:
$('#xxx div').filter((index, el) => {
return $(el).css('backgroundColor') == 'rgb(0, 0, 0)'
}).css('color', 'white');
.a {
background: red;
}
.b {
background: green;
}
.c {
background: blue;
}
.d {
background: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="xxx">
<div class="a">a1</div>
<div class="b">a2</div>
<div class="c">a3</div>
<div class="d">a4</div>
</div>
As far as I know this isn't possible.
You could do it with jQuery.
But a better option might be something like this:
.black { background-color: #000000; }
.red { background-color: #ff0000; }
#xxx > .black { padding: 10px; }
If you don't want to use JQuery, There is a pretty good way to use CSS3 [attribute*=value] Selector to achieve that:
#xxx > div(style*="background:#000")
{
...
}
BUT
Notice 1: keep this in your mind that as attribute selectors don't support regular expressions, you can only perform exact sub-string matches of the attribute value.
Notice 2: You have to use inline mode style, otherwise it does not work.
I hope to be helpful :)
Some of you said this is not possible but it is possible. It's very possible. You just need to take care with the color, browsers (Chrome and Firefox latest that I could try) allow selection based in the background color BUT it has to be in RGB format and you need to use a space after the comma in the color. This will work perfectly:
#xxx[style*="background: rgb(255, 255, 255)"]>div:hover{
border:10px solid #000000;
}
I am currently doing some styling and have thought up an interesting way to do something. I want to create a piece of text that stands out among every other bit of text on the page. Below you can see the way I've done this.
var el = document.querySelectorAll('span[class^=impact]')[0],
col = el.className.split('-')[1];
el.style.textShadow = '2px 2px 0 #' + col;
html, body {
width: 100%;
height: 100%;
margin: 0;
background-image: url('http://i.imgur.com/UxB7TDq.jpg');
}
[class^=impact] {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
font-family: Impact, sans-serif;
font-size: 72pt;
font-weight: 800;
text-transform: uppercase;
}
<span class="impact-008080">impact</span>
As you can see I'm basically getting the first half of the class and applying styles to it and grabbing the second half of the class in JavaScript and applying the shadow then. What I want to do is omit the JavaScript completely and keep it all in CSS.
I do not have a list of colours. Any and all hex colours are supported obviously. I would prefer to keep this format.
CSS attr
Theoretically, this type of thing is what the CSS attr property could be used for when browser support exists. Note that this won't work now, but when browser support does exist, it might look something like this:
HTML
<span class="impact" data-shadow="#008080">Impact</span>
CSS
.impact {
/* you text and positioning styles here */
text-shadow: 2px 2px attr(data-shadow);
}
You can read more about the attr property here:
https://developer.mozilla.org/en-US/docs/Web/CSS/attr
But for now...
Your best bet is probably to continue to use JavaScript, but instead of appending the hex code to the class name, store the hex value in a data attribute of the element, allowing you to keep the class name consistent for all instances of that element.
HTML
<span class="impact" data-shadow="#fff">Impact</span>
CSS
.impact {
/* your text and position styles here */
}
JS
var el = document.querySelector(".impact"),
shadow = el.dataset.shadow;
el.style.textShadow = '2px 2px ' + shadow;
Here's a JSFiddle for reference: http://jsfiddle.net/galengidman/xx6r1n2o/
I want to set all text boxes border color on the form to red. I tried using
$('*').css('border', 'black');
also
var all = document.getElementsByTagName('*');
for(var i=0;i<all.length;i++)
{
all[i].style.backgroundColor = "Red";
}
Nothing is working for me.
In the CSS file all text boxes
input[type=text], .htmlplusinput {
border: 1px solid #C79988;
padding:1px;
width:120px;
cursor: text;
}
input[type=text]:focus, .htmlplusinput:focus {
border:2px solid #25a3fc;
padding:0px;
}
To start with, the $('*') selector matches all elements. If you only want text boxes, you'll want to use $('input:text').
Once you have the selector correct, you need to set the colour of the border. If I recall correctly, the correct CSS property is border-color, so you'd do:
$('input:text').css('border-color', 'red');
Another, potentially better, solution would be to add a class to each of the elements, rather than modifying their style property, then use a CSS declaration for that class to control the appearance of the border:
$('input:text').addClass('redborder');
.redborder {
border-color: red;
}
This should do the job:
jQuery('input:text').css('borderColor', '#000');
I am trying to create a simple mouseover effect using a combination of mouseover, mouseout, addClass, and removeClass. Basically, when the user mouses over an element, I want to apply a different border (1px dashed gray). The initial state is "1px solid white". I have a class called "highlight" which simply has "border: 1px dashed gray" in it. I want to add that class onmouseover and remove it on onmouseout but I am unable to get the effect I want unless I use !important within the "highlight" class.
It sounds as though you've got the javascript working fine as is, but it's just a problem with the specificity of your CSS rules, which is why !important makes it work.
You just have to make your highlighted css rules more specific than the non-highlighted rules.
#someItem ul li { /* Specificity = 102 */
border-color: white;
}
.highlight { /* Specificity = 10 -- not specific enough! */
border-color: grey;
}
#someItem ul li.highlight { /* Specificity = 112 -- this will work */
border-color: grey;
}
Edit with further explanation:
Let's say the relevant parts of your HTML look like this:
<div id="someItem">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
and you have this CSS:
#someItem ul li {
border: 1px solid white;
}
.highlight {
border-color: grey;
}
Currently, all the list items in the ul in #someItem div will have a white border, and nothing has the class highlight so nothing's grey.
Through whatever means you want (in your case a hover event in jQuery), you add a class to one of the items:
$(this).addClass('highlight');
The HTML will now look something like this:
<div id="someItem">
<ul>
<li>Item 1</li>
<li class="highlight">Item 2</li>
<li>Item 3</li>
</ul>
</div>
So far, your Javascript and HTML are working fine, but you don't see a grey border! The problem is your CSS. When the browser is trying to decide how to style the element, it looks at all the different selectors which target an element and the styles defined in those selectors. If there are two different selectors both defining the same style (in our case, the border colour is contested), then it has to decide which style to apply and which to ignore. It does this by means of what is known as "Specificity" - that is, how specific a selector is. As outlined in the HTML Dog article, it does this by assigning a value to each part of your selector, and the one with the highest score wins. The points are:
element selector (eg: "ul", "li", "table") = 1 point
class selector (eg: ".highlight", ".active", ".menu") = 10 points
id selector (eg: "#someItem", "#mainContent") = 100 points
There are some more rules, eg: the keyword !important and also inline styles, but that's mostly irrelevant for this, uhh... "lesson". The only other thing you should know is that if two selectors have the same specificity, then the one defined later in the file wins.
Going back to your problem, given the CSS we had before, we can see why it's still not got a grey border:
#someItem ul li = id + element + element = 100 + 1 + 1 = 102 points
.highlight = class = 10 points
As mentioned earlier, the solution is to create a more specific selector:
#someItem ul li.highlight
= id + element + element + class
= 100 + 1 + 1 + 10
= 112 points
And to answer your question in the comments, you don't need to change any of your javascript or HTML for this to work. If you break down that selector, what it's saying is:
Look for the element with id "someItem", inside that look for a ul element, and then an li element which has the class "highlight" on it.
...and now, given the simple .addClass() call that you made earlier, the li satisfies these conditions, so the border should turn grey.
From Jquery 1.3.3 you'll be able to do this a little simpler. There will be an enhanced version of .toggleClass() available which will be very powerful.
If you don't need to break this out into a function then from 1.3.3 you'll be able to simply do:
$(".myclass").hover(function(){ $(this).toggleClass('highlight'); });
If you're having to include !important then your highlight class may need to be more specific (see CSS Specificity).
I'm guessing you're using an inline style on the element for the initial style:
<style type="text/css">
.hover { border: 1px dashed gray; } /* will never apply */
</style>
...
<!-- this style has priority over class styles! -->
<div style="border: 1px solid white">
...
</div>
This will override the styles applied using a class... So instead of using inline styles, just use a different initial class to apply the initial styles:
<style type="text/css">
.normal { border: 1px solid white; }
.hover { border: 1px dashed gray; }
</style>
...
<div class="normal">
...
</div>
This is an example of a hover I have used:
$(".myclass").hover(jbhovershow,jbhoverhide);
jbhovershow = function () {
$(this).addClass("jimtest");
};
jbhoverhide = function () {
$(this).removeClass("jimtest");
}
you don't really have to break something this simple up into seperate functions.
I suspect your issue might be with a conflict in the css - try just applying your highlight class by hardcodeing it , or on a click and see if it is really working.
Hope that helps
Jim
Have you considered a pure css approach?
For example:
someClass {
border: 1px solid white;
}
someClass:hover {
border: 1px dashed gray;
}
The hover pseudo class will give you the behavior that you want: when the user is moused over the element, it will use the lower style, otherwise it will use the first style.
Note: as someone commented, this doesn't work for non a elements in IE. It does however work for me in Chrome, Firefox, Safari, and Opera.
It also works for any element in IE8 and IE7 standards mode. I don't have IE6 to test with though.
CSS:
div.target {
border: 1px solid #000000;
}
div.target-hover {
border-color: #ff0000;
}
JS:
$("div.target").hover(
function () {
$(this).addClass("target-hover");
},
function () {
$(this).removeClass("target-hover");
}
);
i usually do it this way. (allows more options)
Or you can just do it with simple CSS by using:
#namehere { border: 1px solid #fff; }
#namehere:hover { border: 1px dashed #aaa }