Can JavaScript values be passed into CSS styles?

Question

Can JavaScript values be passed into CSS styles?

I am currently working on dynamically updating the width of a CSS line based on a JavaScript value (a percentage). The line is currently set at 30%, but I would like to replace that hard-coded value with my JavaScript variable (c2_percent) to make it more dynamic. If anyone has any suggestions or solutions, I would greatly appreciate it. Thank you!


        <div class="bar-graph bar-graph-horizontal bar-graph-one">
            <div class="bar-one">
                <span class="rating-a1">A1</span>
                <div class="bar" id="rating-a1" data-percentage=""></div>
            </div>
            <div class="bar-two">
                <span class="rating-a2">A2</span>
                <div class="bar" data-percentage="11%"></div>
            </div>
            <div class="bar-three">
                <span class="rating-a3">A3</span>
                <div class="bar" data-percentage="7%"></div>
            </div>
            <div class="bar-four">
                <span class="rating-b1">B1</span>
                <div class="bar" data-percentage="10%"></div>
            </div>
            <div class="bar-five">
                <span class="rating-b2">B2</span>
                <div class="bar" data-percentage="20%"></div>
            </div>
            <div class="bar-six">
                <span class="rating-b3">B3</span>
                <div class="bar" data-percentage="5%"></div>
            </div>
            <div class="bar-seven">
                <span class="rating-c1">C1</span>
                <div class="bar" data-percentage="9%"></div>
            </div>
            <div class="bar-eight">
                <span class="rating-c2">C2</span>
                <div class="bar" id="c2-rating" data-percentage=""></div>
            </div>
            <div class="bar-nine">
                <span class="rating-c3">C3</span>
                <div class="bar" data-percentage="5%"></div>
            </div>
            <div class="bar-ten">
                <span class="rating-d1">D1</span>
                <div class="bar" data-percentage="5%"></div>
            </div>
        </div>

    @-webkit-keyframes show-bar-eight {
        0% {
            width: 0;
        }
        100% {
            width: 30%;
        }
    }

    <script>
        for (let i = 0; i < 1; i++) {
            const c2_security_values = Array.from(document.querySelectorAll('.security-value-c2'));
            const c2_security_values_inner = c2_security_values.map((element) => element.innerText);
            const c2_summed_values = c2_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));

            const total_security_values = Array.from(document.querySelectorAll('.individual-market-value'));
            const total_security_values_inner = total_security_values.map((element) => element.innerText);
            const total_summed_values = total_security_values_inner.reduce((accumulator, currentValue) => parseInt(accumulator) + parseInt(currentValue));

            const c2_percent = c2_summed_values / total_summed_values;
        }
    </script>

javascript html css django

Answer 1

Answer №1

Thinking off the top of my head, I propose adding the following line of code after computing the c2_percent variable in the script (ensure that c2_percent is defined outside the loop and set as a variable, not a constant).

    document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');

Without additional information about the page elements, styles, etc., it's uncertain if this code will function properly.

Are you looking to adjust the width of the c2-rating element?

This code only updates the data-percentage attribute value.

If you want to alter the CSS width attribute, you can attempt the following:

    document.getElementById('c2-rating').setAttribute("style","width:" + (c2_percent * 100) + '%');

I've created a snippet to demonstrate that this implementation could work, yet its success depends on the context of your project's webpage.

<html>

<head>
    <style>
        .bar-graph {
            font-family: Arial, Helvetica, sans-serif;
        }

        .bar-graph div {
            padding: 5px 0px;
        }

        .bar-graph div span {
            display: inline-block;
            font-weight: 600;
            margin: 5px 5px;
            float: left;
        }

        .bar-graph .bar {
            border: 1px solid #ccc;
            background-color: #eee;
            height: 30px;
        }

        @-webkit-keyframes show-bar-eight {
            0% {
                width: 0;
            }

            100% {
                width: 30%;
            }
        }

    </style>
</head>

<body>
    <div class="bar-graph bar-graph-horizontal bar-graph-one">
        <div class="bar-one">
            <span class="rating-a1">A1</span>
            <div class="bar" id="rating-a1" data-percentage=""></div>
        </div>
        <div class="bar-two">
            <span class="rating-a2">A2</span>
            <div class="bar" data-percentage="11%"></div>
        </div>
        <div class="bar-three">
            <span class="rating-a3">A3</span>
            <div class="bar" data-percentage="7%"></div>
        </div>
        <div class="bar-four">
            <span class="rating-b1">B1</span>
            <div class="bar" data-percentage="10%"></div>
        </div>
        <div class="bar-five">
            <span class="rating-b2">B2</span>
            <div class="bar" data-percentage="20%"></div>
        </div>
        <div class="bar-six">
            <span class="rating-b3">B3</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
        <div class="bar-seven">
            <span class="rating-c1">C1</span>
            <div class="bar" data-percentage="9%"></div>
        </div>
        <div class="bar-eight">
            <span class="rating-c2">C2</span>
            <div class="bar" id="c2-rating" data-percentage=""></div>
        </div>
        <div class="bar-nine">
            <span class="rating-c3">C3</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
        <div class="bar-ten">
            <span class="rating-d1">D1</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
    </div>

    <input type="range" min="0" max="100" value="0" class="slider" id="c2RatingSlider" value="43" onchange="updateC2()">

    <script>
        updateC2();

        function updateC2() {
            var c2_percent = document.getElementById("c2RatingSlider").value / 100;
            document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');

            document.querySelectorAll('.bar').forEach((bar) => {
                const percentage = bar.getAttribute('data-percentage');
                bar.setAttribute("style", "width:" + percentage);
            });
        }
    </script>
</body>

</html>

Answer 2

Thinking off the top of my head, I propose adding the following line of code after computing the c2_percent variable in the script (ensure that c2_percent is defined outside the loop and set as a variable, not a constant).

    document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');

Without additional information about the page elements, styles, etc., it's uncertain if this code will function properly.

Are you looking to adjust the width of the c2-rating element?

This code only updates the data-percentage attribute value.

If you want to alter the CSS width attribute, you can attempt the following:

    document.getElementById('c2-rating').setAttribute("style","width:" + (c2_percent * 100) + '%');

I've created a snippet to demonstrate that this implementation could work, yet its success depends on the context of your project's webpage.

<html>

<head>
    <style>
        .bar-graph {
            font-family: Arial, Helvetica, sans-serif;
        }

        .bar-graph div {
            padding: 5px 0px;
        }

        .bar-graph div span {
            display: inline-block;
            font-weight: 600;
            margin: 5px 5px;
            float: left;
        }

        .bar-graph .bar {
            border: 1px solid #ccc;
            background-color: #eee;
            height: 30px;
        }

        @-webkit-keyframes show-bar-eight {
            0% {
                width: 0;
            }

            100% {
                width: 30%;
            }
        }

    </style>
</head>

<body>
    <div class="bar-graph bar-graph-horizontal bar-graph-one">
        <div class="bar-one">
            <span class="rating-a1">A1</span>
            <div class="bar" id="rating-a1" data-percentage=""></div>
        </div>
        <div class="bar-two">
            <span class="rating-a2">A2</span>
            <div class="bar" data-percentage="11%"></div>
        </div>
        <div class="bar-three">
            <span class="rating-a3">A3</span>
            <div class="bar" data-percentage="7%"></div>
        </div>
        <div class="bar-four">
            <span class="rating-b1">B1</span>
            <div class="bar" data-percentage="10%"></div>
        </div>
        <div class="bar-five">
            <span class="rating-b2">B2</span>
            <div class="bar" data-percentage="20%"></div>
        </div>
        <div class="bar-six">
            <span class="rating-b3">B3</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
        <div class="bar-seven">
            <span class="rating-c1">C1</span>
            <div class="bar" data-percentage="9%"></div>
        </div>
        <div class="bar-eight">
            <span class="rating-c2">C2</span>
            <div class="bar" id="c2-rating" data-percentage=""></div>
        </div>
        <div class="bar-nine">
            <span class="rating-c3">C3</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
        <div class="bar-ten">
            <span class="rating-d1">D1</span>
            <div class="bar" data-percentage="5%"></div>
        </div>
    </div>

    <input type="range" min="0" max="100" value="0" class="slider" id="c2RatingSlider" value="43" onchange="updateC2()">

    <script>
        updateC2();

        function updateC2() {
            var c2_percent = document.getElementById("c2RatingSlider").value / 100;
            document.getElementById('c2-rating').setAttribute("data-percentage", c2_percent * 100 + '%');

            document.querySelectorAll('.bar').forEach((bar) => {
                const percentage = bar.getAttribute('data-percentage');
                bar.setAttribute("style", "width:" + percentage);
            });
        }
    </script>
</body>

</html>

Can JavaScript values be passed into CSS styles?

Answer №1

Similar questions

Incorporate my personalized CSS file into the Bootstrap 4 development tools

Using CSS to set the display property to table-cell and converting it to a

Arranging an array of integers followed by sorting by the decimal part of each value in a particular sequence using JavaScript

Delivery person receiving biscuit but my internet browser doesn't seem to be getting it when I attempt to retrieve it

Accessing the data from an HTML5 slider using JQuery

Instead of using a hardcoded value, opt for event.target.name when updating the state in a nested array

Failure to trigger Summernote's OnImageUpload function

Placing information within a nested array with multiple levels of nesting

Issue with Left Alignment of Tabs in Material-UI

Optimizing normals for unindexed BufferGeometry in Three.js

Combine the remaining bars by stacking the highest one on top in Highchart

What is the best method to pass a JavaScript file array to a Node.js server?

Encountering an error when trying to use this.setState

``Troubleshooting Problem with Tailwind's Flex Box Responsive Grid and Card Elements

Show specific modal or image depending on various criteria

Ways to align Material-UI component side by side

Use ajax calls instead of using the bind() function in Drupal for better performance

The NVD3 chart embedded in a React application generates HTML elements that persist on the page indefinitely without fading away

Navigate to a particular date with react-big-calendar

What is preventing me from binding the array index to a model in AngularJS with two-way binding?