Ok, so listen. I got something like this:
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
<div class="theinsideofclass" style="theinsideofstyle" ...></div>
And they are dynamically changed(each time in different time) and I don't have any control of the source code.
The thing is, I want simply override the theinsideofstyle, but all my attempts are failed. I tried with the !important; but it didn't go. Isn't it suppose to override the inline css? Anyway, what are my options here? Obviously simple JS won't help me here as the entire divs are changed/replaced each time with the same code.
Just shoot with any idea, folks... Perhaps it will navigate for some solution.
You could write some JS that is executed once the entire page is loaded, with all resources loaded, etc:
function load()
{
var els = document.getElementsByClassName("theinsideofclass");
for(var i = 0; i < els.length; i++) {
els[i].removeAttribute("style");
}
}
window.onload = load;
.theinsideofclass {
color: green;
}
<div class="theinsideofclass" style="color: red;">
My inline style is color: black
</div>
<div class="theinsideofclass" style="color: red;">
My inline style is color: black
</div>
<div class="theinsideofclass" style="color: red;">
My inline style is color: black
</div>
As you can see, without the JS the inline style (font color of red) would normally override the external CSS style (green). However, my JS is removing the style attribute from the elements with the class of theinsideofclass so you can style with normal CSS WITHOUT using !important (I never use !important unless all my other options are exhausted).
Hey you could wrap the elements in a div and loop through them + add a custom class which you could then use to define style to these divs.
PLEASE NOTE: I assume by your question that the css-class is also dynamic/changing and you have no control of it.
HTML:
<div id="outerdiv">
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
</div>
JS:
var children = document.getElementById('outerdiv').children;
for (var i = 0; i < children.length; i++) {
var child = children[i];
child.classList.add('myclass'); // this will add the class "myclass" to all the children divs inside the outerdiv
}
CSS:
.myclass {
background-color: red !important; // which ever style you want to overwrite
}
You could even go as far as removing the style attribute from the div with:
child.removeAttribute('style');
This way you won't need to use the !important in your css.
EDIT:
Based on OP's comment.
You could also try wrapping all these divs in an outer div, if you can control where they are rendered:
<div id="outerdiv">
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
<div class="theinsideofclass" style="theinsideofstyle"></div>
</div>
Then in your css:
#outerdiv > div {
background-color: red !important;
}
Hi you can set style attribute to blank like below:
jQuery
$(document).ready(function(){
$('.theinsideofclass').attr('style','');
});
Kinda working demo here : https://jsfiddle.net/nm77md0L/ , https://jsfiddle.net/nm77md0L/1/
Since divs are generated on the fly and recreated when style attribute gets removed, try using setProperty on its CSSStyleDeclaration with third argument set to important.
//document.getElementsByClassName("theinsideofclass")[0].setAttribute('style', 'color: purple !important'); // recreates div
document.getElementsByClassName("theinsideofclass")[0].style.setProperty('color', 'blue', 'important'); // maybe won't?
.theinsideofclass{color: green !important}
<div class="theinsideofclass" style="color: red !important">TXT</div>
I can't guarantee it will work since we can't see what causes the divs to get regenerated and how, but give it a try, maybe the code is recreated when style attribute changes directly.
Related
I'm trying to hide any text on the page that appears inside a div (with a specific class) more than once. For example, if my page has:
<div class="year"><h3>2015</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2017</h3></div>
In this example, I want to use jQuery to check if there is more than one div (with the class of "year") that has the same child h3 text. If so, then hide all except the first, resulting in this:
<div class="year"><h3>2015</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"></div>
<div class="year"></div>
<div class="year"><h3>2017</h3></div>
Any help would be much appreciated! Thanks
What I would recommend doing is grabbing all of the elements with $('.year'), and then setting up an array to store the .innerHTML of each element. You can then loop over the elements, and check if their .innerHTML is in this array. If it's not, it gets added to the array. If it already exists, hide the element:
var elements = $('.year');
var existing_content = [];
for (var i = 0; i < elements.length; i++) {
if (existing_content.indexOf(elements[i].innerHTML) === -1) {
existing_content.push(elements[i].innerHTML);
}
else {
$(elements[i]).hide();
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="year"><h3>2015</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2016</h3></div>
<div class="year"><h3>2017</h3></div>
Note that this assumes that the .year elements all have identical content. If only part of the .year content is the same, you will need to update the elements selector to be more specific, and target the elements with identical content directly.
Hope this helps! :)
My goal, essentially, is to have the CSS :hover replaced by JavaScript. The reason is that I need a loop to be executed on a variable number of divs that will be nested inside the parent div that should react upon :hover.
The problem, however, is that I have no idea how to target just the div being hovered over without hard-coding in specific IDs - something that I will not be able to do once applied to my project, a tumblr theme.
HTML
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
</div>
</div>
<div id="motherbox">
<div class="middlebox">
<div class="childbox">One</div>
<div class="childbox">Two</div>
<div class="childbox">Three</div>
<div class="childbox">Four</div>
<div class="childbox">Five</div>
</div>
</div>
CSS
#motherbox {
width:30%;
height:100px;
margin:100px auto;
background-color:gray;
}
JavaScript
document.getElementById("motherbox").onmouseenter = function(){
this.style.backgroundColor = 'blue';
};
document.getElementById("motherbox").onmouseleave = function(){
this.style.backgroundColor = "gray";
};
JSFiddle
My question is - how do I cause divs with the same class or id to react individually (or, rather, not all at once) on hover using javascript, rather than CSS?
Thank you for your time.
Basically you can select elements having a particular class using getElementsByClassName.
Here is a working demo.
var elements = document.getElementsByClassName('childbox');
for(var i=0; i<elements.length; i++) {
elements[i].onmouseleave = function(){
this.style.backgroundColor = "blue";
};
}
So use instead of getElementById this:
http://www.w3schools.com/jsref/met_document_getelementsbyclassname.asp
And provide classess for your divs, where you want have that event.
I'm trying to use jQuery to loop through classes and append some text to an HTML element. I'm working with the following HTML (example case):
<div class="question">
<div class="title">
<strong>Here's the question title.</strong>
</div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
<div class="question">
<div class="title">
<strong>Here's the question title.</strong>
</div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
So what I'm trying to do is loop through each question on the page, see if the title matches some string, then append some text based on that statement. I have the following:
$('.question').each(function() {
var title = $(this).find('.title').innerHTML;
$('.choice').each(function() {
var span = document.createElement("span");
if (title == "someString")
{
span.className = "someClass";
}
else
{
span.className = "someOtherClass";
}
var text = document.createTextNode("text");
span.appendChild(text);
$(this).appendChild(span);
});
// put this in to see if outer loop was working
document.body.style.backgroundColor = "orange";
});
The text will change color based on what the title is, hence the different CSS classes. But it doesn't seem to be doing anything, not even appending the text to each choice. The background color does change to orange, and Chrome isn't throwing any errors from the script in the developer tools, so I'm totally lost. Can anyone help?
You can get the title like this:
var title = $(this).find('.title strong').text();
Here you're confusing jquery with native javascript, $(this) is a jquery object so you cannot use appendChild() here's how you change that:
$(this).get(0).appendChild(span);
Or you can use jQuery directly:
$(this).append(span);
Using Arun P Johny's fiddle, I've updated a few things;
FIDDLE
The following are the important changes;
var title = $.trim($(this).find('.title').text());
$(this).find('.choice').each(function () {...
Changing $('.choice') to $(this).find('.choice') because you only want to change the elements within that question, not every choice element on the page.
and find('.title').innerHTML; to find('.title').text()); because you only want to match the text within that div, not the html as well.
Something like this?:
Jsfiddle
jQuery ( Comment free code in the jsfiddle ):
// On document ready...
$(function () {
// Geat each title element...
$('.title').each(function () {
// Points to each title element as defined above
var title = $(this),
// Get all siblings of title element(s)
choices = title.siblings(),
// Ternary if statement. Equivalent to if ( X ) {} else {}
myClass = title.text().trim() === "Here's the question title." ? "someClass" : "someOtherClass";
// Make a span element...
$('<span />', {
class: myClass, // Give it a class
text: " Appended text" // Give it some text
}).appendTo(choices); // Append the span to each .choice element
});
});
Html:
<div class="question">
<div class="title"><strong>Here's the question title.</strong></div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
<div class="question">
<div class="title"><strong>Here's the question title.</strong></div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
<div class="question">
<div class="title"><strong>Here's title.</strong></div>
<div class="choice">Here's choice1.</div>
<div class="choice">Here's choice2.</div>
</div>
Css:
.someClass {
color: red;
}
.someOtherClass {
color: green;
}
.question { margin: 10px 0px; }
I'm trying to get a class added on when a div is inside a certain parent div.
<div class="parent1">
<div class="child">
Content
</div>
</div>
.parent1 only exists on one page, while .child exists on others as well as this one.
So when .child is everywhere else, its color is red, but when it's inside .parent1 I want its color to be blue.
Here's what I'm using.
if ($('.child').parents('.parent1').length == 1) {
.addClass('.new-class');
}
I'm having no success with this. Can anyone help?
$(".parent1 .child").addClass("new-class");
Or
$(".parent1>.child").addClass("new-class");
If you want to make sure only first child will be populated with class:
<div class="parent1">
<div class="child"> <!-- will have also "new-class" class -->
<div class="child"> <!-- will NOT have "new-class" class -->
</div>
</div>
</div>
.addClass('.new-class'); adds that class to something. You forgot to tell jQuery what something is, and caused a syntax error instead (which your browser console would have told you about if you had it open). I believe you want this:
$('.parent1 .child').addClass('.new-class');
Well, since you did tag this as just javascript...
HTML
<div class="parent1" id="parent">
<div class="child" id="child">
Content
</div>
</div>
CSS
.has-parent {
color: blue;
}
Javascript
var child = document.getElementById('child');
var parent = document.getElementById('parent');
if (child.parentNode == parent) {
child.className += ' has-parent';
}
DEMO
You could also do this with just CSS:
.child
{
color: red;
}
.parent .child
{
color: blue;
}
So long as the .parent .child rule comes after the single .child rule, it will override the color with blue. No extra work to change the color. If you need this extra class for some other reason the The User 518469 's answer is probably best.
the code is like this:
<div id="comments">
<h2>comments list</h2>
<div class="clear-block">....</div>
<div class="clear-block">....</div>
<div class="clear-block">....</div>
<div class="indented">....</div> // this div is indented.
<div class="box"...</div>
</div>
now, i want to use jquery to add a border to the
<h2>......</div>
part.maybe i shoule add a div label first before the h2 label, then the close label
</div>
before
<div class="box"> .
then using a style
border:1px...
but i don't how to do it. thank you.
the border effect like this http://phplist.xxmn.com/1.jpg
$('.clear-block,.indented,.box').css('border', '1px solid black');