Matching Javascript Variables to CSS Styles

Question

Matching Javascript Variables to CSS Styles

I am currently developing a small HTML page and I am utilizing JavaScript to retrieve the screen dimensions. However, I am facing an issue with passing this variable to a CSS style as shown below. How can I achieve this successfully? Additionally, I have observed that "px" needs to be appended at the end of the value for proper formatting, such as top: 100px instead of top:100. How can I incorporate this into my variable adjustment? Any assistance on this matter would be greatly appreciated.


<script type="text/javascript>
var percent =1;
var myWidth = Math.round(screen.width * percent);
var myHeight = Math.round(screen.height * percent);
</script>

<style type="text/css">
div.content {
    margin: auto;
    top: myHeight + 'px';
    width: myWidth + 'px';
}
</style>

javascript html css variables

Answer 1

Answer №1

To incorporate LESS CSS, experiment with the following code snippet:

    @percent: 1;
    @height: `Math.round( screen.height * @{percent})`;
    @width: `Math.round( screen.width * @{percent})`;
    div.content {
    margin: auto;
    top: @height;
    width: @width;
    }

If you are considering using JQUERY, test out this code instead:

var percent=1;
$("div.content").css('top', Math.round( screen.height * percent)+'px');
$("div.content").width(Math.round( screen.width * percent));

If your preference is for JS, give this code a try:

var percent=1;
document.querySelector('div.content').style.top = Math.round( screen.height * percent)+'px';
document.querySelector('div.content').style.width = Math.round( screen.width * percent)+'px';

Answer 2

To incorporate LESS CSS, experiment with the following code snippet:

    @percent: 1;
    @height: `Math.round( screen.height * @{percent})`;
    @width: `Math.round( screen.width * @{percent})`;
    div.content {
    margin: auto;
    top: @height;
    width: @width;
    }

If you are considering using JQUERY, test out this code instead:

var percent=1;
$("div.content").css('top', Math.round( screen.height * percent)+'px');
$("div.content").width(Math.round( screen.width * percent));

If your preference is for JS, give this code a try:

var percent=1;
document.querySelector('div.content').style.top = Math.round( screen.height * percent)+'px';
document.querySelector('div.content').style.width = Math.round( screen.width * percent)+'px';

Answer 3

Answer №2

If you're working with vanilla JavaScript, one approach is to fetch all div elements using the getElementsByTagName method and then narrow down the selection based on their class names such as content.

For modern browsers (especially for those stubborn IE versions):

An alternative could be employing the getElementsByClassName function to target only divs within the document.
You may also utilize the querySelectorAll method that directly gives you a collection of matching elements.

Subsequently, iterate over each matched element and apply the following style changes:

currentDiv.style.top = myHeight;
currentDiv.style.width = myWidth;

Answer 4

If you're working with vanilla JavaScript, one approach is to fetch all div elements using the getElementsByTagName method and then narrow down the selection based on their class names such as content.

For modern browsers (especially for those stubborn IE versions):

An alternative could be employing the getElementsByClassName function to target only divs within the document.
You may also utilize the querySelectorAll method that directly gives you a collection of matching elements.

Subsequently, iterate over each matched element and apply the following style changes:

currentDiv.style.top = myHeight;
currentDiv.style.width = myWidth;

Answer 5

Answer №3

let dynamicCss = "div.container { margin: auto; top: " + 
    customHeight + "; width: " + customWidth + " ; }";

let customStyle = document.createElement('style');
customStyle.type = 'text/css';
customStyle.styleSheet ? customStyle.styleSheet.cssText = dynamicCss : 
    customStyle.appendChild(document.createTextNode(dynamicCss));

document.getElementsByTagName("head")[0].appendChild(customStyle);

This code snippet generates a unique style element as specified and attaches it to the head section of the HTML document, thereby applying the styles.

Answer 6

let dynamicCss = "div.container { margin: auto; top: " + 
    customHeight + "; width: " + customWidth + " ; }";

let customStyle = document.createElement('style');
customStyle.type = 'text/css';
customStyle.styleSheet ? customStyle.styleSheet.cssText = dynamicCss : 
    customStyle.appendChild(document.createTextNode(dynamicCss));

document.getElementsByTagName("head")[0].appendChild(customStyle);

This code snippet generates a unique style element as specified and attaches it to the head section of the HTML document, thereby applying the styles.

Answer 7

Answer №4

jQuery is compatible with all web browsers, including Internet Explorer, although it requires jQuery to function properly. Meanwhile, JavaScript is supported by most browsers except for Internet Explorer. Alternatively, Pure CSS can be used as a fallback in case JavaScript is disabled. Choose the solution that suits your needs best :).

JavaScript

var width = body.offsetWidth;
var height = body.offsetHeight;
var _content = document.querySelectorAll(".content");
content.style.width = width + "px";
content.style.height = height + "px";

Or jQuery

var width = $(document).width();
var height = $(document).height();
var _content = $('.class');
content.style.width = width + "px";
content.style.height = height + "px";

Or CSS

.content {
    margin:auto;
    top:100%;
    width:100%;
}

Answer 8

jQuery is compatible with all web browsers, including Internet Explorer, although it requires jQuery to function properly. Meanwhile, JavaScript is supported by most browsers except for Internet Explorer. Alternatively, Pure CSS can be used as a fallback in case JavaScript is disabled. Choose the solution that suits your needs best :).

JavaScript

var width = body.offsetWidth;
var height = body.offsetHeight;
var _content = document.querySelectorAll(".content");
content.style.width = width + "px";
content.style.height = height + "px";

Or jQuery

var width = $(document).width();
var height = $(document).height();
var _content = $('.class');
content.style.width = width + "px";
content.style.height = height + "px";

Or CSS

.content {
    margin:auto;
    top:100%;
    width:100%;
}

Answer 9

Answer №5

Have you thought about incorporating a tool such as LESS? It might be worth exploring, depending on your needs and preferences.

Answer 10

Have you thought about incorporating a tool such as LESS? It might be worth exploring, depending on your needs and preferences.

Matching Javascript Variables to CSS Styles

Answer №1

Answer №2

Answer №3

Answer №4

JavaScript

Or jQuery

Or CSS

Answer №5

Similar questions

JavaScript has issues with undefined array elements

Conceal only the anchor tag's text and include a class during the media query

Library written in JavaScript for extracting CSS that is relevant

After subscribing, my Angular template fails to refresh

Hiding Modal Box Upon User Login: A Step-by-Step Guide

Ensure that the body background image remains stretched and perfectly centered regardless of the screen resolution

"Simultaneously creating a Firebase user account and populating the database with user

Incorporate a comma after the second or third digit to separate currency values in JavaScript

I am struggling to retrieve a value from the angular.forEach function, the flag value is not being obtained. What could be

Using Vue JS to display information conditionally within a single component

The col-md-4 class in Bootstrap does not consistently maintain a width of 33%

Exploring the Power of Websharper with Sitelets and Forms

Implementing cross-app module injection in Node.js

Tips for aligning two elements in a row using Bootstrap 4 Flex

The event is not triggered by ng-submit

Guide on inserting a new user to the db.json

Alter the color of H3 when clicked and then gently fade it back

The customized icon in the Material UI Select component lacks proper vertical centering

The bodyparser in Express seems to be malfunctioning

Props and theme merge to create uniquely designed styled components with a thematic twist