how do you get the specific style altered with a CSS class? - javascript

Quick one, not sure if its possible.
How can I get the specific style altered with a CSS class using jQuery/JS.
Example:
html looks like:
<tab>
<a class="anchor">a</a>
</tab>
CSS looks like:
a{border:1px}
.anchor{color:green}
So if i do something like :
$('.anchor').myReturnStyle() and it returns color or an array if there more styles in .anchor
$('.anchor').MyReturnStyleValue('color') returns 'green'
BUT
$('.anchor').returnStyleValue('border') returns false as this is not changed by .anchor Class

You can use jQuery's css(..) method to achieve this. Please note that:
Shorthand CSS properties (e.g. margin, background, border) are not supported.
Here is an example:
<div>
<a class="anchor">a</a>
</div>
<style type="text/css">
a { background-color: #000; }
.anchor{ color: green; }
</style>
<script type="text/javascript">
$(document).ready(function () {
alert($($('.anchor').get(0).nodeName).css('background-color'));
});
</script>
See the jsFiddle demo

Related

How to restrict the scope of dynamic HTML CSS in Angular 4 [duplicate]

I would like to apply a CSS file to a concrete DIV in my page. This is the page structure:
<link rel="stylesheet" href="style.css" />
...
<body>
<div id="pagina-page" data-role="page">
...
<div id="applyCSS">
(all the elements here must follow a concrete CSS rules)
</div>
...
</body>
I tried to apply the rules of the CSS file editing it like this (the CSS file is so large):
#applyCSS * { (For all the elements inside "applyCSS" DIV:)
.ui-bar-a {
...
...
}
.ui-bar-a .ui-link-inherit {
...
}
...
}
But that solution doesn't work. So, how can I do that?
#applyCSS > * {
/* Your style */
}
Check this JSfiddle
It will style all children and grandchildren, but will exclude loosely flying text in the div itself and only target wrapped (by tags) content.
You could try:
#applyCSS .ui-bar-a {property:value}
#applyCSS .ui-bar-a .ui-link-inherit {property:value}
Etc, etc... Is that what you're looking for?
.yourWrapperClass * {
/* your styles for ALL */
}
This code will apply styles all elements inside .yourWrapperClass.
I do not understand why it does not work for you, it works for me : http://jsfiddle.net/igorlaszlo/wcm1soma/1/
The HTML
<div id="pagina-page" data-role="page">
<div id="applyCSS">
<!--all the elements here must follow a concrete CSS rules-->
<a class="ui-bar-a">This "a" element text should be red
<span class="ui-link-inherit">This span text in "a" element should be red too</span>
</a>
</div>
</div>
The CSS
#applyCSS * {color:red;display:block;margin:20px;}
Maybe you have some special rules that you did not share with us...
If you're looking for a shortcut for writing out all of your selectors, then a CSS Preprocessor (Sass, LESS, Stylus, etc.) can do what you're looking for. However, the generated styles must be valid CSS.
Sass:
#applyCSS {
.ui-bar-a {
color: blue;
}
.ui-bar-a .ui-link-inherit {
color: orange;
}
background: #CCC;
}
Generated CSS:
#applyCSS {
background: #CCC;
}
#applyCSS .ui-bar-a {
color: blue;
}
#applyCSS .ui-bar-a .ui-link-inherit {
color: orange;
}
Write all class/id CSS as below. #applyCSS ID will be parent of all CSS code.
For example you add class .ui-bar-a in CSS for applying to your div:
#applyCSS .ui-bar-a { font-size:11px; } /* This will be your CSS part */
Below is your HTML part:
<div id="applyCSS">
<div class="ui-bar-a">testing</div>
</div>
Alternate solution. Include your external CSS in your HTML file by
<link rel="stylesheet" href="css/applyCSS.css"/>
inside the applyCSS.css:
#applyCSS {
/** Your Style**/
}

how to toggle text color?

I need to toggle text color from red to green and vice versa.
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>
CSS
#logoup{
color:red;
}
.greened{
color:green;
}
JS
$("#btn").click(function(){
$('#logoup').toggleClass('greened');
});
Doesn't work. Console is empty.
jsfiddle
In CSS, an id's defined styles take precedence over an class's defined styles. You can simply attached the class name to the id to fix this without the the need to use !important which should only be used as a last resort:
JS Fiddle
#logoup.greened {
color: green;
}
You could use important on green, or you could control the coloring using classes, instead of applying it to the element.
Method 1: Use important! on the greened class
$("#btn").click(function() {
$('#logoup').toggleClass('greened');
});
#logoup {
color: red;
}
.greened {
color: green !important;
}
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Method 2: Don't apply color to ID, use classes
$("#btn").click(function() {
$('#logoup').toggleClass('red green');
});
.red {
color: red;
}
.green {
color: green;
}
<div id="logoup" class="red">DEEP</div>
<button id='btn'>CLICK</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
id occupy highers css specificity than class . So class wont be able to over rules the styles set by the id.
Following changes will work
CSS
.logoup{ // id changed to class
color:red;
}
.greened{
color:green;
}
HTML
<div id="logoup" class="logoup">DEEP</div>
<button id='btn'>CLICK</button>
JSFIDDLE
When you use id instead of class you must remember about css rules prioritization. The style that has the highest CSS specificity is applied. The specificity of different elements is defined as follows:
ID attribute = 100
Class attribute = 10
Element = 1
To check this rewrite your css:
#logoup{
color:red;
}
.greened{
color:green!important;
}
Read about css rule priorities.
Selector Priority. Override it using !important;
$("#btn").click(function() {
$('#logoup').toggleClass('greened');
});
.greened {
color: green !important;
}
#logoup {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="logoup">DEEP</div>
<button id='btn'>CLICK</button>

How to change the default highlight color of drop down in html from blue to some other color for <select><option> tag

How to change the default highlight color of drop down in HTML from blue to some other color for <select><option> tags, using some CSS properties or from Javascript?
The requirement is I have to use the <select> <option> tags only. I tried the code below, but it didn't work for me:
<html>
<head>
<title>Dropdown Colour</title>
<style type="text/css">
option:hover {
background:#C6C4BD;
}
</style>
</head>
<body>
<select>
<option>Shell</option>
<option>Cabbage</option>
<option>Beans</option>
<option>Cheese</option>
<option>Clock</option>
<option>Monkey</option>
</select>
</body>
</html>
try setting outline and/or border properties of select.
select{outline:1px solid green;border:1px solid black;}
Currently there is no way I know of that this can be accomplished using only CSS.
However, using jQuery I was able to achieve a similar effect.
Live Demo
Your dropdown changes because i have to set the size of the select element which makes it look like a list-box. Maybe somebody can improvise on this.
Here is the jQuery i used
$(document).ready(function (event) {
$('select').on('mouseenter', 'option', function (e) {
this.style.background = "limegreen";
});
$('select').on('mouseleave', 'option', function (e) {
this.style.background = "none";
});
});
Try to change like this, hope it may help you
select option{
background: red;
color: #fff;
outline:1px solid green;
}

How to change the color of another link on hover?

This is the simple HTML code:
<li class="main">
ImageLink <!--1st anchor tag-->
ImageName <!--2nd anchor tag-->
</li>
Is it possible to change the color of 2nd anchor tag on hover state of 1st anchor tag? (And vice versa.)
Not with css. This kind of actions can only be done by script.
If you use jQuery you could add the following script:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript>
$(document).ready(function(){
var a1 = $('a:first');
var a2 = $('a:second');
a1.hover(function(){ a2.toggleClass('hover') }, function(){ a2.toggleClass('hover') });
a2.hover(function(){ a1.toggleClass('hover') }, function(){ a1.toggleClass('hover') });
});
</script>
Now you can use the hover class to specify the color:
.hover { color: red; }
Edit
It would be easier to give both a's an id, so you could reference them by using var a1 = $('#a1');.
With CSS, it's possible to change the color of the 2nd anchor tag on hover of the 1st anchor tag with a sibling selector, but I don't think you can do it vice-versa:
a:hover + a {
color: red;
}
JSFiddle preview: http://jsfiddle.net/9Ezt5/
See http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors
However, note that adjacent sibling selectors are not supported on all browsers: http://www.quirksmode.org/css/contents.html
Yes you can do it with pure css.
for example:
a:hover + a{
background:red;
}
Check this for more
http://jsfiddle.net/Bw5by/
In Jquery you can do it like this,
$("#first").hover(function(){
$('#second').css('color','red')
},function(){
$('#second').css('color','blue')
});
See it in action here,
http://jsfiddle.net/gagan/NYAHY/1/
If those are the only two links in the list item tag, then you could do something like this:
li.main:hover a
{
color: red;
}
li.main a:hover
{
color: blue;
}
Then your hovered link will be blue, and all the other ones (in this case just that other one) will be red.

How do I give successive CSS classes different colors (Javascript)?

I have annotated text, and I'd like certain annotated words to be color-coded along with their annotations, but I don't want to have to do it manually. Is there a way to have javascript (or jquery) or even css make the first class="Noted" green, then the second blue, and then on the fifth go back to green, and to do the same with the corresponding class="note"s?
you can do this using :nth-child you will need something like jQuery for support for IE though.. working on that...
here's a first fiddle for a CSS only version http:http://jsfiddle.net/zhQ67/2/ ** FIDDLE updated with new code below **
CSS:
.noted:nth-child(4n+1) {
background: green;
}
.noted:nth-child(4n+2) {
background: red;
}
.noted:nth-child(4n+3) {
background: yellow;
}
.noted:nth-child(4n+4) {
background: blue;
}
final update using thirtdots updated code and including some jQuery for IE - JSBIN Page
Ok, based on your jsFiddle you could use something along these lines to get the result you're after:
p:nth-child(5n+1) .Noted, p:nth-child(5n+1) .Annotation {color: green}
as demonstarted in this modification of your jsfiddle
You can get all elements with getElementsByClass an then simply iterate through them, giving every single one and it's corresponding element class="note" a different color.
In jquery.....set the colors as you see fit. jsFiddle demo
<script type="text/javascript">
$(".Noted").each(function(i,e){
switch(i%4){
case 0: $(this).css({color:"#f00"});break;
case 1: $(this).css({color:"#0f0"});break;
case 2: $(this).css({color:"#00f"});break;
case 3: $(this).css({color:"#ff9"});break;
case 4: $(this).css({color:"#f90"});break;
}
});
</script>
First, try encapsulating your elements inside a container. It will make the children selection much easier.
<div id="parent">
<span class="note">Green</span>, <span class="note">blue</span>
then <span class="note">red</span>.
</div>
then, the js :
<script>
var children = document.getElementById('parent').getElementsByTagName('*')
,colours = ['green','blue','red','orange']
,i,j=0,max;
for (i = 0, max = children.length; i<max; i++) {
if(children[i].getAttribute('class') == 'note') {
children[i].setAttribute('style','color:' + colours[j]);
j++;
if (j>colours.length) {
j = 0;
}
}
}
</script>
If the HTML is being generated by a server side script, you could have the script assign a class based on which Annotation is being generated, then in the stylesheet, assign a color to that class, like so:
.note1 { //Corresponds to class='note1'
color: green; //or whatever you want
}
.note2 { //Corresponds to class='note2'
color: blue; //or whatever you want
}
/* and so on */
If the HTML is simply being written statically, then assign the class corresponding to how it defined in the stylesheet, depending on the color you want.
If they are children, you could use something along the lines of clairesuzy's solution.
The other option is to assign all of them as class note and then have an javascript that colors everything marked as class note based on a predefined order that you set.
That would probably be along the lines of something like this (using jQuery):
Demo here: http://jsfiddle.net/hs8Nm/
<p class="note">Note 1</p>
<p class="note">Note 2</p>
<p class="note">Note 3</p>
<p class="note">Note 4</p>
and the corresponding Javascript:
$(document).ready(function(){
var colors = ['green','blue','orange','yellow',"FFFFF0"]; //Assign your color order here.
$('.note').each(function(index){
this.css('color',colors[index%5]);
});
});
Yes, it can be done using CSS Selectors. You can get the first, second, third, and so on element in a list of matching occurences.
Here you go:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<title>Cycle classes</title>
<style>
.blue {
background-color: blue;
}
.green {
background-color: green;
}
.yellow {
background-color: yellow;
}
</style>
<script>
$(document).ready( function() {
$(".Noted").each(function(i) {
var classes = ['green','blue','yellow'];
$(this).addClass(classes[i % classes.length])
});
})
</script>
</head>
<body>
<div class="Noted">hello</div>
<div class="Noted">world</div>
<div class="Noted">it works</div>
</body>
</html>

Categories