I have already some css style on my element (my element has 1500px of height). But when i tried to change the colors of it, the height was replaced by the colors putted, so the height of my element is deleted..
Here is the code :
document.getElementById("tabcmp0").style.backgroundColor = "#e9e9e9";
But i want to not replace the background color by the existing css style, i just want to add this background color to the css already existing, how to do this please ?
I don't think so this(document.getElementById("tabcmp0").style.backgroundColor = "#e9e9e9";) will replace your css with previous css, but you can do the following
there is multiple ways to solve your problem
1:Add class in javascript
in css
.class{
background-color:#e9e9e9;
height:1500px !important;
}
in JS
var element = document.getElementById("tabcmp0");
element.classList.add("class");
2: If you are using jquery
$('#tabcmp0').css({'background-color':'#e9e9e9'});
and if you want to use multiple css
$('#tabcmp0').css({'background-color':'#e9e9e9', 'height':'1500px'});
hope this solves your problem
As you edited your question, my answer will be changed and you can only have one css color at a time on a particular element,
what you can do now is add 2 <div> inside your element and add css on both the div separatly
like
<myElement>
<div stlye="your backgroundcolor">
</div>
<div stlye="your backgroundcolor">
</div>
</myElement>
I have tested this and it should not overwrite your existing style.
You can check it in action HERE
Here is the code (maybe you can use it to find what you are missing or what is causing your issue).
<!DOCTYPE html>
<html>
<head>
<style>
#democlass {
color: red;
font-size:100px;
}
</style>
</head>
<body>
<h1 id="democlass">Hello World</h1>
<p>Click the button to add an id background style to the h1 element.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("democlass").style.backgroundColor = "#e9e9e9";
}
</script>
</body>
</html>
Note that the font-size doesn't change when adding the backgroundColor.
Use Object.assign
Object.assign(yourelement.style,{backgroundColor:"#e9e9e9",height:"1500px"});
Related
Home
<p id="dt"></p>
<script>
document.getElementById("dt").innerHTML = "hello";
</script>
I just need both statements on the same line. This must be simple!! (but I cant do it!) Thanks
p is representing a paragraph and therefore is (usually) a block element. For what you are doing, you would be better served with using an inline element like span.
Making the element inline will lead to both being displayed on the same line. If switching the tag is not an option, use css to set display:inline on the paragraph.
The <p> tag will create a new line by default. One way to prevent this is CSS display: inline.
<style>
#dt {display: inline;}
</style>
Home
<p id="dt"></p>
<script>
document.getElementById("dt").innerHTML = "hello";
</script>
<a href="index.shtml" style=' white-space: nowrap;'>Home</a>
<div id="dt" style='display: inline-block;'></div>
<script >
document.getElementById("dt").innerHTML = "hello";
</script>
Reference
I'll make to quick. I'm trying to position an element wrt my target. Normally we have prepend (before the target) and append (after the target). But is there smth along those lines that helps us place that element ON what we’re targeting, instead of putting it before (prepend) or after(append)?
If you want new HTML Elements add to target... I don't know if this is what you want.
$('.target-x').html('<div class="target-b">new elements</div>')
.target-x {background:#bbb;padding:10px;}
.target-b {background:#fff;color:#222;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div class="target-top">Elements</div>
<div class="target-x">New Elements Target</div>
<div class="target-bottom">Elements</div>
</body>
You can use position:absolute on a :before to place it ON the actual content.
HTML
<div class="example">This is an example div</div>
CSS
.example {
background-color: #5BC8F7;
}
.example::before {
position:absolute;
content: "Above!";
background-color: #FFBA10;
}
I need to add a CSS/HTML 'fragment' to a page to change the text in the following:
<div>
<h3 class="category-heading">Keep this text:</h3>
</div>
<div>
<h3 class="category-heading">**Change this text**:</h3>
</div>
I have tried the following:
<style>
h3.category-heading {
text-indent: -9999px;
}
h3.category-heading::after {
content: “New and Featured Products”;
text-indent: 0;
display: block;
line –height: 120%;
}
</style>
But this changed both instances of the text.
Is it possible to specify the second instance of the css class to be changed? or is it possible to select and change the wording in the second css class by adding a html fragment?
Supposing you can use Javascript by including it an HTML fragment :
Depending on the inclusion mecanism (we need to know more about the tools you use), something containing :
<script>
window.onload = function(){
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
}
</script>
If the first solution breaks some features of your website (because It could override defined behaviour), you should use :
<script>
document.getElementsByClassName("category-heading")[1].innerHTML = "New and Featured Products";
</script>
Why not to use an id attribute?
<h3 class="category-heading" id="itemThatShouldBeChanged">**Change this text**:</h3>
and than just
#itemThatShouldBeChanged {content:"other text"}
You should take a look at nth-child
Be aware that this is CSS3
this will give you the following css selector :
div:nth-child(2) h3.category-heading::after
I need a way to get certain CSS attributes for all HTML elements in a page and make them inline. I have a with custom CSS attributes, for example:
<style type="text/css">
h2 { color: red; }
</style>
And then:
<h2>This is my title</h2>
So, I need a script that will make the following change (and only the following):
<h2 style="color: red;">This is my title</h2>
Any thoughts?
Basics of CSS:
This will make all h2 tags have a text color of red
<style type="text/css">
h2 { color: red; }
</style>
<h2>I'm red</h2>
<h2>I'm also red</h2>
<h1>I'm not red</h1>
This will make all tags with the class of chicken be red.
<style type="text/css">
.chicken { color: red; } /* chicken is the class name*/
</style>
<h2 class = "chicken">I'm red</h2>
<div class = "chicken">I'm also red</div>
<h2>I'm not red</h2>
If you only want to give one tag a specific property you give it an id
<style type="text/css">
#chicken { color: red; }
</style>
<h2 id= "chicken">I'm red</h2>
I don't really understand what you're looking form, but the property for making something inline is:
display:inline
http://www.w3schools.com/cssref/pr_class_display.asp
If you replace the color:red with display:inline then their properties will change from being red to inline.
If you only want to do it for h2 elements and for CSS color attribute then the following should work
$('h2').each(function(){
$(this).css('color', $(this).css('color'));
});
If you want other elements/attributes then you will need to build it out.
I'm not quite sure what you mean by "get certain CSS attributes for all HTML elements in a page and make them inline." What are you trying to do?
For individual inline styling, use the span tag:
My mummy has <span style="color:blue">blue</span> eyes.
To style certain elements, as the user above has done with jQuery, use a class tag for each element that you wish to style:
CSS:
.specialStyle {color: #00d;}
HTML:
<div id="anyOldDiv" class="specialStyle">...</div>
click here
I've just started building a web page help (highlighting + tutorial steps) jQuery plugin. You can see the latest result here.
http://goo.gl/ZZ2xy
My first try for highlighting is to have 4 overlay div's which are just moved around by css transition. It's simple but not perfect. It creates space lines between the overlay elements, in Chrome at least.
What would be the best way to create this animation?
I've got better solution for ya'. It's a proff-of-concept and definetly needs tweaking but in general it works. The idea is to use table 3x3 as overlay, use semi-transparent background for all cells except for one that is suppose to work as a window through which you're looking at target html element.
I imagine there may be some quirks with browsers (probably fixable) but it's still cleaner and nicer option than one you're using right now.
The example code is available here http://jsbin.com/ekijev/4
Using jQuery .css() method right improved the thing a lot. Still sometimes a white line but it's ok for me. It's allready updated at github.
Old:
$elem.css({"left" : x})
.css({"top" : y})
.width(width)
.height(height);
New
$elem.css({
"left" : x,
"top" : y,
"width" : width,
"height" : height
});
so i have a fade solution for you. just the basics but should be enough to help you out.
just paste the code into a notepad file save and run
CODE UPDATED
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<style>
DIV{
width:200px;
height:200px;
display:inline-block;
}
.black{
background:black;
}
.yellow{
background:yellow;
}
.red{
background:red;
}
.green{
background:green;
}
</style>
</head>
<body>
<div id="container">
<div id="1" class="yellow"></div>
<div id="2" class="black"></div>
<div id="3" class="red"></div>
<div id="4" class="green"></div>
</div>
</body>
<script>
$(document).ready( function (){
var target = 2;//id of element we dont want faded
var pageElements = $('#container').find('*').toArray();//get all elements in our container
for(var counter = 0; counter < pageElements.length;counter++){//itterate through them
if(pageElements[counter].id != target){//if element is not our target fade
$(pageElements[counter]).fadeOut("slow",OnFadeComplete);//fade
}
}
});
function OnFadeComplete(){
$(this).attr('style','visibility:hidden;');
}
</script>