We Keep Coding

Replace style tag with javascript equivalent [duplicate]

This question already has answers here:
Javascript before onload?
(2 answers)
Closed 2 years ago.
An HTML page has an inline block in the HEAD like so:
<style type="text/css">
body {font-size: 1.2em}
</style>
This sets the body font size immediately when the page is loaded.
I want to replace this with something more dynamic but still on the client side.
How can I use JavaScript to set such a style that would be available and visible immediately that the page is rendered? Body.onload is too late. I need an equivalent to this style block, but with JavaScript.

The answer was to use document.head.innerHTML += in an inline script block to add HTML representing the STYLE block and style. This is added to the DOM immediately after the SCRIPT tag that creates it. Using backticks for the HTML template containing the font size would have made it even easier, though in the end I had to support IE 11 so backticks were out.
The solution:
<script>
var fontSize = //font size retrieved here;
document.head.innerHTML += "<style type=\"text/css\"> \nbody { font-size: ".concat(fontSize, "em } \n</style>");
</script>

How about this. I suppose that you can not insert CSS directly.
<p id="myCSS"></p>
<script><!--
document.getElementById("myCSS").outerHTML=[
'<style type="text/css">'
,'body { font-size: 1em; line-height: 1.5em }'
,'<\/style>'].join('\r');
-->
</script>
Note that some CSS settings are hard to recovery to it's original one. With the css value unset you can do that, but IE does not support it. In such cases, maybe 'try and error' is the best you can do.

Javascript: Change placeholder color of created input [duplicate]

This question already has answers here:
Change a HTML5 input's placeholder color with CSS
(43 answers)
Closed 4 years ago.
So i created a input using document.createElement
but i just cant seem to get my mind around changing the color of the text of the placeholder i made for it!?
How do i do this?
ive already tried doing element.placeholder.style.color element::placeholder.style.color and more!

You can use the ::placeholder pseudo-class in most modern browsers:
input::placeholder {
font-weight: bold;
font-style: italic;
opacity: 0.5;
color: #336699;
}
<input type=text placeholder="Hello World">
The pseudo-class is currently not part of a specification (well not part of a "ratified" spec) so it's often seen behind a prefix like -webkit-placeholder or -moz-placeholder. In Firefox 58 and Chrome 64 however plain ::placeholder does work.
From a userscript, you can create a new <style> element containing your rules and append that to the document body.

You can add the property to ::placeholder pseudo element.Know more here
var x = (document.createElement('input'));
x.placeholder = "Test";
document.body.appendChild(x)
::-webkit-input-placeholder {
color: green;
}

Creating new html tags (elements) [duplicate]

This question already has answers here:
Is there a way to create your own html tag in HTML5?
(18 answers)
Closed 6 years ago.
So we can use javascript to crate new html elements, right?
But if I write in html code:
sea{width: 100px; height: 100px; background: blue; color: red;}
<sea>This is sea tag</sea>
It does make font color red and background blue but dimensions aren't working...
Is that possible only with javascript or not?
Like with new html5 elements (header, footer, section...) is there possible way to create my own names for elements or not?

So we can use javascript to crate new html elements, right?
No. You can create new elements, and put them into an HTML document, but they aren't HTML. They don't come with any semantics. They don't have any default styling (including audio styling for screen readers). Don't do that.
It does make font color red and background blue but dimensions aren't working... Is that possible only with javascript or not?
JavaScript is irrelevant. You'd get the same problem if you generated the same invalid DOM with JS. Browser error recovery treats unrecognised elements as display: inline by default. height and width do not apply to elements that are display: inline, you would have to set a different value (e.g. display: block) for height and width to apply.

sea{width: 100px; height: 100px; background: blue; color: red; display:block;}
<sea>This is sea tag</sea>
I think it helps you. Default display block will not come with custom HTML Tags...

Javascript not returning style properties [duplicate]

This question already has answers here:
How to get an HTML element's style values in JavaScript?
(5 answers)
Closed 6 years ago.
I have a simple script that is getting the color of the text in an element and printing it to the console. However, when I run the script, I'm getting an empty string rather than the actual color. Can anyone explain to me why and how to fix it?
HTML
<div id="scrollingTextHolder">
<p id="scrollingText">Hello</p>
</div>
CSS
#scrollingText{
margin-top: 5%;
color: black;
}
JS
window.addEventListener("load", function(){
console.log(document.getElementById("scrollingText").style.color);
})
Pen

You can use getComputedStyle() and getPropertyValue(), also color is returned as rgb(R,G,B)
var a = document.getElementById("scrollingText");
console.log(window.getComputedStyle(a).getPropertyValue('color'))
#scrollingText {
margin-top: 5%;
color: black;
}
<div id="scrollingTextHolder">
<p id="scrollingText">Hello</p>
</div>

can i give a name to the css property [duplicate]

This question already has answers here:
Creating CSS Global Variables : Stylesheet theme management [duplicate]
(6 answers)
Is there any way to use variables in css?
(3 answers)
Closed 8 years ago.
Here is an example:
This is the normal css:
h1{
background-color: #fafafa;
}
I would like to change this to the following:
h1{
background-color: default or any id name
}
Where can I give a javascript command to change this color code(i.e #fafafa)? Where ever it is in the stylesheet to default or any id name.
So that I can use it in a color switcher to change the color for this code. I don't want to use less because I have already gone way to far in my project.

You can not do that as CSS is completely static what you can do is when you want to change the color for that element on a particular condition you can add an id to the element using javascript/jQuery by enclosing the element in a span/div in the first place. and write a new css for that particular id. so on your desired event new css will apply to that element and color will be changed at runtime.

Either you use some variables for example in the style you can use this:
var width = "150px";
And in the container use something like:
<div style="width: #width">A div with width 150px.</div>
But brother there is no default value for them.
As the code you are showing is using a hex value for a color. That cannot be converted to a default name. However using variable can do it. Or you can try using rgba. But there isn't any default name. However You can try to write the color name itself as:
color: white;
or
color: red;
But I am not sure it will work for you for your job.

You can give name to css property through this font-family
p
{
font-family:"Times New Roman",Georgia,Serif;
}