Access CSS variable in Javascript - javascript

Why can't I do this? Or how can i do this?
/* this does not work and I want to achieve something like this */
el.style.setProperty("--member-clr", var('--server-clr'));
/* only below works */
el.style.setProperty("--member-clr", 'black')
CSS:
main {
--server-clr: linear-gradient(blah,blah)
}
I tried above and simply what I need to work does not work(it's illegal I get it so what is my best option?)

Related

How to change background color of a page while avoiding iframes/images/videos using js/css?

I am new to CSS/JS and I am creating an accessibility chrome extension and I need to change the background color of the page. The problem I encounter is when changing the color of pages that have videos like twitch and youtube.
function changeBKColorPredefined(background, color) {
var tags = document.querySelectorAll("*");
for (let i = 0; i < tags.length; i++) {
tags[i].style.backgroundColor = background;
tags[i].style.color = color;
}
}
This code clearly changes everything there is on the page, but I don't know how to avoid changing the background color of certain tags without having to specifying them which would of course become a really hard to maintain code.
Example output of the code showed before:
I have also tried to only change the body color by using document.body.style.backgroundColor but it does not change the color of the whole page.
Thank you for any help.
Edit: an example of what I mean can be found in this extension: https://chrome.google.com/webstore/detail/a%20-fontsize-changer/ckihgechpahhpompcinglebkgcdgpkil
Use css custom properties also known as CSS Variables. This way you can set in your CSS property value as background, and then change only said value.
Simple example would be:
:root {
/**
* This will be your default value. In this example - black.
*/
--changing-background: #000;
}
/**
* In places where you want to change backround set it as background color
*/
.classes-with-changing-background {
background-color: var(--changing-background);
}
Then in JS you do:
// This is your JS. In my example we change property value to white
document.documentElement.style.setProperty('--changing-background', '#fff');
I took JS from this answer

Get CSS variable in JS on change, resizing, or media-quiries [duplicate]

This question already has answers here:
Detect dynamic media queries with JavaScript without hardcoding the breakpoint widths in the script?
(4 answers)
Closed 1 year ago.
It's currently possible to get or set CSS variables from Javascript using either:
// get
getComputedStyle(document.documentElement)
.getPropertyValue('--variable');
// set
document.documentElement.style
.setProperty('--variable', '500px');
But in CSS I can set the style to be this:
:root {
--variable: "1000px";
}
#media( max-width: 800px ) {
:root {
--variable: "400px";
}
}
But the JS won't re-trigger if it is only run on the first load.
Is there any way to make it trigger on events that the CSS would change the value?
Unless the page loaded in < 800px width, it would get the variable value as 1000px
Question 1: getting only one value
At the moment your JS indeed only get 1000px as value for the variable because there is a huddle in your CSS.
In media queries you have to advise the variable to element :root either. Without advising a variable to an element it does not work. Try:
// CSS
// --> in media queries advice settings to elements
:root {
--variable: "1000px";
}
#media (max-width: 800px) {
/* use correct css */
:root {
--variable: "400px";
}
}
Question 2: trigger events in JS to get values
Yes. You are able to trigger events and execute your code. Here is an example to do it when the window resize:
// JAVASCRIPT
// --> when window resize
// --> read css variable and show value in console
window.addEventListener('resize', function(){
let value_var = getComputedStyle(document.documentElement).getPropertyValue('--variable');
console.log(value_var);
});
More information about triggering events in JS: https://www.w3schools.com/js/js_events.asp

Is there a way to detect the IE11 and change the whole style sheet? [duplicate]

This question already has answers here:
How to detect IE11?
(16 answers)
Closed 7 years ago.
I would like to know if there is a way to detect IE11 and with an IF make the the HTML page use a different style sheet. I don't want to change it one by one, because it's not so professional.
P.S.: I'm not asking a way to detect IE11(unless you do it in a different way :) )
Thanks in advance.
Representation:
var ua = window.navigator.userAgent;
if (ua.indexOf("Trident/7.0") > 0) { //if IE11
//(set the style sheet 1)
}else{
//(set the style sheet 2)
}
<style id="s1">
<!--made for ie11-->
</style>
<style id="s2">
<!--made for google chrome-->
</style>
Hi you can do something like this in css:
IE 11 (and above..)
_:-ms-fullscreen, :root .ie11up { property:value; }
this will only show the css you insert in the properties when user is on IE11 or above.
You then can put the rest of the css in
IE 9
#media screen and (min-width:0\0) and (min-resolution: .001dpcm) {
// IE9 CSS
.ie9{property:value;}
}
there is IE8, 7, 6 as well.
i would not recommend having multiple stylesheets for the same page. There is no need just assign them different classes in one stylesheet using the css above and it will work fine.
Here's another thing you can do for detecting IE:
CSS:
html[data-useragent*='MSIE 9.0'] { /* IE 9 */
/* CSS */
}
html[data-useragent*='MSIE 10.0'] { /* IE 10 */
/* CSS */
}
html[data-useragent*='rv:11.0'] { /* IE 11 */
/* CSS */
}
JS: (At the bottom of body.)
document.documentElement.setAttribute('data-useragent', navigator.userAgent);
Update:
I really like Josh Stevens' solution which specifically targets css and doesn't require any javascript. However, it's good to know about IE's documentMode too as sometimes you need to load different javascript files depending on the mode (though that's usually for IE<10).
Original:
Guess I'd just do it the simple way by using IE's built-in documentMode property
if (document.documentMode == 11) {
// do something awesome
}
Just tested this in IE8-11, Firefox, and Chrome ... seemed to work okay.
Bad news. There is no HTML conditional for IE11. You have to handle it with javascript.

<HTML> is automatically setting inline-style that I think is set by Google's JSAPI

So, I bought the Roker theme from themeforest.net and created my website. It works fine and looks great but when I try to open my website on a Windows touch device - Surface Pro (IE and Firefox) or Windows Phone, I cannot scroll with my finger i.e. touch is not working.
When I look at the HTML code, the rendered page’s tag is adding this style
-ms-overflow-x: hidden; -ms-overflow-y: hidden; -ms-touch-action: auto !important;
And the overflow is set as an inline style.
This seems to get set automatically when I include the Google's JSAPI, because when I comment the <script type="text/javascript" src="http://www.google.com/jsapi"></script>, then everything works fine.
Any suggestions on how can I overcome this? I can share the link of my website if you want to see what is happening yourself.
Ideally you would want to track down the js file and find out why it is adding those inline styles.
I have a feeling it may have to do with the 'no-touch' class. You may want to use something like the following JS:
$(document).ready(function(){
detectMsTouch();
function detectMsTouch() {
var touchPoints = window.navigator.msMaxTouchPoints;
if (touchPoints) {
$('html').removeClass('no-touch').addClass('touch');
}
else {
return;
}
}
});
Another thing that may work is forcing the style with a CSS override.
ms-overflow-y: visible !important;
Hope it works for you.

jquery .hover() confusion

I am currently programming my portfolio page and I came across a strange behaviour off hover states that I don't understand.
I have some links in a navigation bar at the top of my page. The links are fully defined with :hover and everything. Now I also want the colour of the links to change when I hover the mouse over the different sections of the site that the links refer to.
So I wrote this:
/* Navlink colors */
$('#portfolio').hover(function() {
$('#portLink').css('color','#FF9900');
}, function() {
$('#portLink').css('color','inherit');
});
$('#about').hover(function() {
$('#aboLink').css('color','#FF9900');
}, function() {
$('#aboLink').css('color','inherit');
});
...
At first it seems to work, but when you scroll to the blog and then move the mouse over the navigation the css :hover doesn’t seem to work anymore. This is my test site:
http://www.henning-marxen.de/test/index.html (Don't laugh those are placeholders^^)
Do you know why it behaves like this? I am very confused. Thank you very much in advance.
You should use CSS for this, not jQuery:
#portLink:hover, #about:hover { color: #FF9900; }
Or (to more explicitly match your JS):
#portfolio:hover #portLink, #about:hover #aboLink { color: #FF9900; }
If your link elements are not descendent of those first selectors, use + to group them (as indicated in this fiddle): http://jsfiddle.net/B8Xuw/ *note this assumes they are siblings rather than parent>child
#portfolio:hover + #portLink, #about:hover + #aboLink { color: #FF9900; }
You need a mix of js and css for this. In your css you need to apply your styles with the hover state but also with a class which I'll call current for this example.
.nav-link:hover,
.nav-link.current{
color:#FF9900;
}
Then all you javascript needs to do is add or remove the class depending on which part of the site you have scrolled to:
var navLinks = $('.nav-link');
//each time the user scrolls, reset all links by removing class.
navLinks.removeClass('current');
//Then find the link that needs highlighting and add the class to it.
//There obviously needs to be some logic here to filter the correct link.
navLinks.filter('[href="#portfolio"]').addClass('current');
Try this:
/* Navlink colors */
$('#portfolio').hover(function() {
$('[href="#portfolio"]').css('color','#FF9900');
}, function() {
$('[href="#portfolio"]').css('color','inherit');
});
$('#about').hover(function() {
$('[href="#about"]').css('color','#FF9900');
}, function() {
$('[href="#about"]').css('color','inherit');
});

Categories

Resources