This may not be possible, but I'd like to confirm.
You can globally change the selected text highlight color of the page with
::selection {
background: #cccccc;
}
::-moz-selection {
background: #cccccc;
}
but is it possible to change the the highlighted color for an individual element in JavaScript?
For example, if s is an element's style attribute, you can change the text and background colors using
s.color = s.backgroundColor = "#cccccc";
is there a style to change the element's highlight color?
This must be in old-fashioned JavaScript, no JQuery.
EDIT:
Also, because of performance, I need to change this to the element itself. CSS class swapping performs very poorly. The use case is that every word in a page I do not own will become it's own element. On an average page, adding a CSS class through script is taking 20-30 seconds whereas changing inline styles can be done in under 1.
Pseudo-elements and pseudo-classes aren't in the DOM, but you can use classes to achieve your result.
So add a rule like
.selectionclass::-moz-selection {
background: #cccccc;
}
to your stylesheet and add the class name selectionclass to your element.
Related
I have this div that I need to change the background color of, however it does not have any class or an id to access it.
<div style="margin-bottom:10px;background-color:#fff;padding:10px;">
</div>
The reason I can't add a class is because I am making an extension for the website, not the actual website, and it needs to access it and change the background color (dark mode).
You can use an attribute selector. Be aware that this will only work
as long as the attribute (style) value doesn't change, not in a single character;
if you need to overwrite any of the inline styles being set in that div, you need to make your CSS rule !important to beat the inline style specificity.
div[style="margin-bottom:10px;background-color:#fff;padding:10px;"] {
background-color: orange !important;
}
<div style="margin-bottom:10px;background-color:#fff;padding:10px;"></div>
This question already has answers here:
Can I have an onclick effect in CSS?
(14 answers)
Closed 6 years ago.
In javascript, you can easily execute onclick events directly from the html element:
<div onclick="..javascript here.."></div>
I know that you can change the css styles with the <style> tag, but I was wondering if you were able to execute it similarly to the example below:
<div onclick="..css here.."></div>
if you want to do it purely through css you have to use :active or maybe :focus:
div:hover { color: red; } /* mouse-over */
div:active { color: red; } /* mouse-down (this cause also focus) */
input:focus{ color: red; } /* got focus (by tab key or mouse-down) */
/* for <a> element: */
a:link { color: red; } /* unvisited links */
a:visited { color: red; } /* visited links */
Note: the :active does not stay permanent after the user release the mouse button for elements that does not take focus (like as a div) but it works for elements like as text inputs or buttons. there is a workaround for it called "Checkbox Hack" where you use a connected label and checkbox input and some other element you are trying to control..
Also, if you want to change css class or inline styles, you could do as following:
<div onclick="this.style['border'] = '2px solid red';">Click me</div>
There is, but the element needs to have a tabindex attribute.
With a tabindex on the element you can use:
element:focus {
/* some_CSS; */
}
'some_CSS' will kick in when the element is clicked.
You can use javascript to change the style of a div or any other element. But I donot know whether there is a way to change css by onclick event without using javascript.
I can explain my method.
<script>
function change_css(){
document.getElementById('change_css').className='newClassName';
}
</script>
<div onclick="change_css()" class="initial_class">content</div>
The above code will help you change the style by changing the class, provided you have already created a class with css. It replaces all the previously provided classes for that div and add the new one.
To add an additional class to the div without replacing the existing classes, use the following statement in javascript:
document.getElementById('change_css').className+=' newClassName';
On some websites you can choose a color theme of a website by clicking a button. Seems like nothing sophisticated, however is there any state of the art techniques to do that (maybe toggle between classes throughout a page or call different css files)?
Give your body a color class.
For example <body class="color-green">. You can toggle the class via JS:
document.body.classList.toggle('color-green').
In your CSS you have to create color-aware selectors:
.button {
color: blue;
}
.color-green .button {
color: green;
}
In my opinion that's the way to go.
If you create a lot of color rules in your CSS you should probably seperate them into their own files and include them when the change-color button is clicked.
i find the new css3 solutions very helpfull also the js:
element.classList.add('className');
element.classList.remove('className');
element.classList.toggle('className');
element.classList.contains('className');// check first
and so if you want to change the whole page's style you need to start from the highest element as you can't style parent nodes with css ...
example 1
with more than 2 classes
body.class1{color:blue}
body.class1>div{color:blue}
body.class1>div>a>p>whatever:hover{color:blue}
body.class2{color:green}
body.class2>div{color:green}
/*the div's inside the body with class 'class2' have a green font*/
body.class2>div>a>p>whatever:hover{color:green}
in this case you change the style to the whole page by just calling
body.classList.remove('class1');
body.classList.add('class2');
example 2
with 2 classes (one default and extra)
body{color:blue}
body>div{color:blue}
body>div>a>p>whatever:hover{color:blue}
body.extra{color:green}
body.extra>div{color:green}
body.extra>div>a>p>whatever:hover{color:green}
js:
body.classList.toggle('extra');
you can also change the whole css.. depends on how much your really wanna change.
or create the rules dynamically with javascript
https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet.insertRule
myStyle.insertRule("#blanc { color: white }", 0);
but i think the first one is the simplest to handle...
also if you have a container which will be displayed as grid,rows large icons the simplest solution is just to create a class on the parent container.like in example 1.
tip:another thing i use alot lately is hsla (hue,saturation,lightness,alpha);
i use this if i want to have the background and the font the same color but the font just slightly darker:
background-color:hsla(360,100%,20%,1);// 20% light
color:hsla(360,100%,80%,1);// 80% light
Using javascript, I randomly pick a word from a text in an html div tag and surround it with a span tag. Using the class of the span tag I try to perform a CSS transition of the word color from black to red. I then remove the span tag to change the word back to black color. The effect I am looking for are "flashing words".
I manage to get the word to change color, but can not get the smooth CSS transition to work.
My question is: Why isn't the CSS transition working?
My problem seems similar to this question, but I do not manage to get the solution of "forcing a layout" to work in my case.
I hope it is ok to provide a working link to the test code I am working with instead of posting code here (javascript file here). If not, I will of course on request add code to this post.
Thank you in advance! I have been busting my head against this problem for a full day without success. Time to acknowledge that I need help with this one :-)
Edit: Adding code.
HTML:
<div id="message">
Some words here.
</div>
CSS:
div#message span
{
color: black;
}
div#message span.redtext
{
transition: color 5s ease-out 0s;
color: red;
}
Javascript:
//Insert span around word
var newText = text.split(randomWord).join('<span>' + randomWord + '</span>');
$("#message").html(newText);
//Request property that requires layout to force a layout
var x = $("#message").clientHeight;
//Add class to span
var newText = newText.split('<span>').join('<span class="redtext">');
$("#message").html(newText);
CSS transitions apply to style changes on elements. When a new CSS style applies to the element you are able to specify the transition to use in that change. In your example, you have added a span which is created with a red text style. The span element has the red text style on creation. You are not transitioning an element from one style to another, you are simply inserting it with the redtext class style.
What you need to do is add a span with black text inside it, and then change the class of the span from "blacktext" to "redtext", and the transition will apply. You could insert it without a class at all and then change it, but I used the class 'blacktext' to make it easier to identify.
See:
http://jsfiddle.net/n8zNW/
Give your span a class so that you can easily get a reference to it using jquery. Then use the addClass and removeClass jquery methods to add and subsequently remove the class that gives the text its colour.
Here's a working example: http://jsfiddle.net/sVMZJ/
In my css i have
* {
font-family: "Meiryo UI" , Verdana;
font-size:13px;
}
input, select, textarea {
font-size: 12px;
border-color: #333;
color: #333;
border-style: solid;
border-width: 1px;
}
But, i want one DIV without CSS.
I tried
$('#preview').removeClass()
$('#preview').removeAttr("style")
$('#preview').children().removeAttr/Class
But...but without result.
Help me to remove all style from this div with Jquery or just some javascript.
He come from stylesheet.
This is preview pic for my question: https://emailinvest.com/preview.jpg what i want.
Inheritance in CSS is more often helpful than not helpful, therefore take another route by either:
a) Override the styles you specified
#preview .input, #preview select, #preview textarea { }
or
b) Make the styles you specified target a different area using a prefixed selector, eg
#selector * { font: 13px "Meiryo UI", Verdana; }
#selector input, #selector select, #selector textarea { }
If you want to use removeClass you must specify what class to remove or it won't work:
$('#preview input').removeClass('classToRemove')
$('#preview button').removeClass('classToRemove')
You can check with Firebug what class is given to that button and try to remove it like that.
Or you can set your styles directly to that:
$('#preview button').css('background','#ccc');
Or this one.. but I'm not sure it works:
$('#preview').children().removeAttr('class'); // or 'style'
Your stylesheet does not specify classes or specific elements (IDs) and therefore the styles are being applied to all elements which match by tag.
Specifically, your button is being styled by the "input" element style specified in the stylesheet.
This means you do not have any classes you can easily remove to reset the style.
Buttons in particular are very difficult to set back to their original style once they have been set to something different, particularly in a cross-browser-friendly way.
You have a few options, of which only one is sensible:
As meder has suggested above don't set the style for this div in the first place. This is the best option. You can do this by either setting explicit class names or ids for your other divs and listing them in the stylesheet, OR add a class for the div you want to ignore, and use the "not" selector, eg input:not(.myUnstyledButtonClass) (this only works in modern browsers)
Manually construct your DIV inside an IFrame so it is not subject to the main document's styling. This seems like overkill though
I haven't tested this one, but you could try creating an iFrame, rendering a button (which would be of the unstyled form) and then iterate and recurse through and copy all properties and styles of the unstyled button to the button in your div. There's a very slim possibility this would work. I wouldn't even bother trying it however....
Go with 1 - what meder has suggested. It's probably worth posting up the code you have tried using when you commented to him that "I tried...no result". Chances are you've simply misinterpreted his suggestion or overlooked something.
For an example, see:
http://jsbin.com/ikobe4
To use ":not()" you need to add unstyled (or whatever you choose) as a class on your button, eg:
<input type="button" class="unstyled" value="Button Text" />
And change the selector in the css file from
input, select, textarea {
to
input:not(.unstyled), select, textarea {
...but as mentioned, this wont work in all browsers, so your best bet is to add classes to all the other divs, and explicitly specify which divs you want to apply styles to, rather than specifying which you don't want to apply styles to