Adding additional attributes to the tag

  • Greetings I have been playing around with the bootstrap framework for this test theme.

    According to the “Introduction” page at Bootstrap, the CSS should be loaded with the following link tag”

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">

    There are 2 additional attributes in their CSS tag, “integrity” and “crossorigin.”

    The WordPress enqueue function doesn’t seem to have any way to add custom attributes so I thought I would try a jquery solution using “document.getElementById() since the Bootstrap link tag has an ID of “bootstrap-css.”

    $( document ).ready(function() {
    var strapatt = document.getElementById('bootstrap-css');
	strapatt.setAttribute("integrity", "sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb");
	strapatt.setAttribute("crossorigin", "anonymous");
});

    The file name is “bootstrap-attributes.js.”

    The script is loading but it’s not adding the additional attributes.

    Where am I going wrong on this?

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)

  • Have you used your browsers developer tools to check if the console shows any JS errors?

    Also–?WordPress loads jQuery in compatibility mode, which means the site may not recognize your use of $ as a shortcut for jQuery.

    Try formatting your JS like this:

    jQuery( function( $ ) {
    $( document ).ready(function() {
        var strapatt = document.getElementById('bootstrap-css');
	    strapatt.setAttribute("integrity", "sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb");
	    strapatt.setAttribute("crossorigin", "anonymous");
    });
});
    Thread Starter figure2

    (@figure2)

    Thanks! that worked.

    Turns out there are js errors that the console found but none with my code. Don’t even know there these files are.

    https://www.markhannondesign.com/clientJobs/js_errors.jpg

    Moderator bcworkz

    (@bcworkz)

    If you hover over the filename:line# links in the console, the URL of the file should pop up ??

    The errors listed are where the JS interpreter realized there was an error. It is not necessarily the root cause of the error. Any prior code could be the root cause of the listed error. For example, passing the wrong data type to a function can cause a type error within the function, though there is nothing wrong with the function. The problem was in the passed data.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Adding additional attributes to the tag’ is closed to new replies.