We Keep Coding

How to parse and change colors of a CSS Stylesheet on a live website via JavaScript?

Assuming the following CSS stylesheet is used on a live website. What is the best way to parse all the colors used on the stylesheet and change the values with new ones using JavaScript?
In this scenario, I can't create CSS classes to override the colors via plain CSS, so JavaScript is the only way to go. There is no manageable way to add or edit classes. Since they are dynamic and change on each new product release. And changes should happen only on Client side. With no need to store the overrides.
The goal is to re-theme an UI, overriding the existing color with a new color palette. Each old color will be converted into a new one. i.e #FFF -> #000 rgb(33,33,33) -> rgb(66,66,66)
.my-classdas90das {
color: #000000;
}
.other-classAd21 {
background: rgba(255,255,255);
border-color: #222222;
}
.a-class438I {
box-shadow: 1px 1px 1px rgba(44, 44, 44);
}
My first attempt was to loop and access the properties via:
document.styleSheets[1].cssRules[0].style
Is there any better way to do this?

If you have control over the initial colors going into your stylesheet, you can utilize CSS custom properties and change them later in JavaScript with little difficulty. Here's an example:
document.getElementById('change').addEventListener('click', () => {
document.body.style.setProperty('--color1', 'red');
document.body.style.setProperty('--color2', 'pink');
document.body.style.setProperty('--color3', 'green');
document.body.style.setProperty('--color4', 'purple');
});
:root {
background: #eee;
--color1: #555;
--color2: rgba(255, 255, 255);
--color3: #222222;
--color4: rgba(44, 44, 44);
}
div,
button {
margin: 1em;
}
.my-classdas90das {
color: var(--color1);
}
.other-classAd21 {
background: var(--color2);
border: 2px solid var(--color3);
}
.a-class438I {
box-shadow: 1px 1px 1px var(--color4);
}
<div class="my-classdas90das">
my-classdas90das
</div>
<div class="other-classAd21">
other-classAd21
</div>
<div class="a-class438I">
a-class438I
</div>
<button id="change">Change Colors</button>

How do I check for CSS styling with JavaScript?

Why am I unable to test for CSS styling like this:
if (document.getElementById("myText").style.outline == "10px solid black")
{
// Do something
}
or
if (document.getElementById("myText").style.match("outline: 10px solid
black"))
{
// Do something;
}
when I have:
#myText
{
outline: 10px solid black;
}

I assume getComputedStyle will help in finding the applied style
var elem1 = document.getElementById("myText"),
style = window.getComputedStyle(elem1, null);
console.log(style.outline)
#myText {
outline: 10px solid black;
}
<div id="myText">Text</div>

The style property will only return styles that are set on the element's style attribute or in javascript, so you won't see styles that applied separately by CSS.
Furthermore, there are multiple ways of expressing the same set of CSS properties, and the browser is generating a string that describes the current properties (rather than returning whatever string you used to set them). Therefore the browser can and will reorder the property values and/or convert them to other units (e.g. black -> rgb(0,0,0)) so testing for a particular string is never going to be reliable. E.g.
document.body.style.outline = "10px solid black"
console.log(document.body.style.outline)

How to put css code in javascript

i want to add a css code in a javascript function, this is the function that I have
function test1() {
document.getElementById("p1").innerHTML = "test";
}
and i want this css code in it
p1 {
text-shadow: 0 1px 0 #ccc,
0 2px 0 #c9c9c9,
0 3px 0 #bbb,
0 4px 0 #b9b9b9,
0 5px 0 #aaa,
0 6px 1px rgba(0,0,0,.1),
0 0 5px rgba(0,0,0,.1),
0 1px 3px rgba(0,0,0,.3),
0 3px 5px rgba(0,0,0,.2),
0 5px 10px rgba(0,0,0,.25),
0 10px 10px rgba(0,0,0,.2),
0 20px 20px rgba(0,0,0,.15);
}
-
Basically, I have a paragraph (p1) and I use javascript because I made a button which onclick="test1()" so when it clicks it it will change the text to the one I put which is "test", but I don't want the whole paragraph to have the shadows, I only want the 'test' to have it, hope I was clear enough!
thank you

Try this,
<p id="p1">
This is a <span>test.</span>
</p>
<button id="button1">Button</button>
From what I understand from your question, you want the function to add a shadow to JUST the word test. In that case using a <span> element might be the easiest way to achieve that. .innerHTML() does not select the text inside the <p> instead it sets the text so you would have been left with an element with just the word 'test' inside.
And the javascript below can be modified to your liking, but the basic concept is there.
var button = document.getElementById("button1");
button.addEventListener("click", function(){
var p = document.getElementById("p1");
var test = p.getElementsByTagName("span")[0];
test.style.textShadow = "5px 5px 1px #ff0000,10px 10px 1px #0000ff";
});
Fiddle: https://jsfiddle.net/0Lhc4tav/

Something like that ?
document.getElementById("p1").style.textShadow = "5px 5px 1px #ff0000,10px 10px 1px #0000ff";
Found here : http://www.w3schools.com/jsref/prop_style_textshadow.asp

It's hard to say, you should really post your HTML as well so we can better understand it. You can also try this if you can use jQuery:
$('.p1').css('text-shadow','0px 5px...etc');
But I agree that you may not need to do this via JS.

Make a character as if it is inside the background but not

I don't feel my headline ticker is good to see for my visitors. it is in please check this link
what I need is to make the headline words inside of the background but readable enough. it is like a shadow. anyone can help please, this site must be submitted tomorrow and be soon launched.
the headline ticker I use is in javascript as below:
<script language="javascript">
//<![CDATA[
var lgth=0;
var info1="Selamat Datang di www.savageryonline.com";
var info2="SavageryOnline ... Tempat Belanja Aman dan Nyaman Bersama Keluarga!";
var info3="Belanja Super Hemat! Kualitas Super Hebat!";
dataTampil=new items(info1,info2,info3);
var ini=0;
var st=0;
var x=dataTampil[0].length;
function items() {
lgth=items.arguments.length;
for (i=0; i<lgth; i++) this[i]=items.arguments[i];
}
function newheadlinez(){
var datShowNow=dataTampil[ini].substring(0,st)+""; document.getElementById("headline").innerHTML=datShowNow; document.getElementById("headline").style.color="white"; document.getElementById("headline").style.cursor="pointer";
if(st++==x) {
st=0; setTimeout("newheadlinez()",5000); ini++; if(ini==lgth) ini=0; x=dataTampil[ini].length;
}
else setTimeout("newheadlinez()",50);
}
//]]>
</script>
these words I need to change like shadow but not and as if it is united with the background. Sorry, I can't give you screenshot for this.
"Selamat Datang di www.savageryonline.com"
"SavageryOnline ... Tempat Belanja Aman dan Nyaman Bersama Keluarga!"
"Belanja Super Hemat!
I try to change it with CSS but it doesn't work. (i'm bad in css).
UPDATE:
I fiddle out the script:
JsFiddle Link

Do you want to try shadow effect..try adding this in #topup
-webkit-box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);
-moz-box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);
box-shadow: inset 1px 1px 5px 6px rgba(0,0,0,0.65);

try using opacity property:
{
opacity:0.5;
}

Setting both border-left and border-right for a div using javascript

Forgive me if my question is very basic. I have a div as follows:
<div id="container">...</div>
Now, I'm trying to set both border-left and border-right attributes for the div in a script:
<script>
var div = document.getElementById("container");
div.style.borderLeft = "1px solid white";
div.style.borderRight = "1px solid white";
</script>
The problem is that the attribute I set second always overrides the first one, i.e here only borderRight is set for the div. If I put style.borderRight followed by style.borderLeft, then it sets only border-left attribute. Why is this happening? It works fine if I set it directly in the css.
Thanks.

You can use Jquery
$("#container").attr("style"," border-left: 1px solid white; border-right: 1px solid white")
this will add attribute style to the div with id "container" and with both borders as a value.