If data attribute is true with jQuery

Question

I have a problem with my code. I am trying to add a background color to div if data attribute is true. This is my HTML code:

<html data-highcontrast-applied="true">
<head>
</head>
<body>
  <div class="row-centered">
    <p>
    Helllllllooooooooooo
    </p>
  </div>
</body>
</html>

This is jQuery code

$(document ).ready(function() {

        if(typeof $("html").attr('highcontrast-applied')  == 'true')
        {
            $(".row-centered").css({"background-color": "red"});
        }

    });

Can somebody help me with this? Also this is a jsfiddle link: https://jsfiddle.net/dmv9o3ep/2/

either use `$("html").attr('data-highcontrast-applied')` or `$("html").data('highcontrast-applied')` So you final `if` statement would be `if($("html").data('highcontrast-applied'))` — Carsten Løvbo Andersen, Nov 20 '19 at 08:53

score 2 · Answer 1 · answered Nov 20 '19 at 09:04

try to remove typeof and get the value of this attribute like string then compare it with 'true'

$(document ).ready(function() {

    if($("html").attr('data-highcontrast-applied').toString() == 'true')
    {
        $(".row-centered").css({"background-color": "red"});
    }

});

Ivanka Todorova · Answer 2 · 2019-11-20T09:03:48.470

The problems with your code are:

You are not properly getting the value of the html attribute;
typeof on $("html").attr('data-highcontrast-applied') will return boolean not the value of the html attribute;

I would set the data-* attribute to either 1 or 0 and then use parseInt and check if it's equal to 1 and apply the background (or any other css properties you want):

$(document).ready(function() {
  if (parseInt($("html").attr('data-highcontrast-applied')) === 1) {
    $(".row-centered").css({
      "background-color": "red"
    });
  }
});

https://jsfiddle.net/eht9faoz/

You can read more about jQuery .data() and .attr(): https://stackoverflow.com/a/7262427/867418

score 0 · Answer 3 · answered Nov 20 '19 at 08:57

0

You misspelled the attribute name, try this:

$(document).ready(function() {
    if(typeof $("html").attr("data-highcontrast-applied"))
    {
        $(".row-centered").css({"background-color": "red"});
    }   
});

answered Nov 20 '19 at 08:57

ziga1337

144
1
10

score 0 · Answer 4 · answered Nov 20 '19 at 08:58

0

You dont need to use typeof there

$(function() {
        if($("html").data('highcontrast-applied') == true) {
            $(".row-centered").css({"background-color": "red"});
        }
 });

this works like this

answered Nov 20 '19 at 08:58

Tobias Fuchs

910
5
8

score 0 · Answer 5 · answered Nov 20 '19 at 08:58

0

You should use

if($("html").attr('data-highcontrast-applied')){}

or

if($("html").data('highcontrast-applied')){}

answered Nov 20 '19 at 08:58

Shuaib Khan

119
4

score 0 · Answer 6 · answered Nov 20 '19 at 09:05

You can use native javascript to achieve

$(document ).ready(function() {
        var temp = document.getElementsByTagName("html")[0].getAttribute("data-highcontrast-applied");
    console.log("temp==", temp);
        if(temp === 'true')
        {
            $(".row-centered").css({"background-color": "red"});
        }

    });

https://jsfiddle.net/tyfg6ezv/

Pushprajsinh Chudasama · Answer 7 · 2019-11-20T13:17:33.463

You can try with .addClass().It's working.

$(document ).ready(function() {
  var temp = document.getElementsByTagName("html")[0].getAttribute("data-highcontrast-applied");
  if(temp === 'true')
  {
   $(".row-centered").addClass("intro");
  }
 
 });

.intro{
  background-color : red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html data-highcontrast-applied="true">
<head>

</head>
<body>
  <div class="row-centered">
    <p>
    Helllllllooooooooooo
    </p>
  </div>
</body>
</html>

If data attribute is true with jQuery

7 Answers7