Acquire the CSS percentage value using jQuery

Question

Acquire the CSS percentage value using jQuery

At this moment, the width() function in jQuery as well as its variations all return values in pixels. The same applies when using the css('width') method.

I have elements that are styled in external .css files, and there is no way for me to determine if they are styled in percentages or pixels. If an element has a width set in percentage or no width at all, I need to retrieve a percent value.

For instance, consider the following:

.seventy { width: 70%; }
.pixels { width: 350px; }

<div class="seventy"></div>
<div class="pixels"></div>
<div class="regular"></div>

In this scenario, these would be the desired outcomes:

$('.seventy').method() //=> '70%'
$('.pixels').method() //=> '350px'
$('.regular').method() //=> '100%' due to default behavior of block elements

Is there a built-in method in jQuery that can help me achieve this outcome? Alternatively, is there a custom approach that could be taken?

javascript jquery css

Answer 1

Answer №1

To retrieve style information from a CSS file, you can utilize the document.stylesheets method to locate a specific style rule. It is important to note that this approach will only provide the parsed style after it has been interpreted by the browser. If you require the raw unaltered CSS as written in the file itself, then direct parsing of the file content is necessary rather than relying on document.stylesheets.

It should be acknowledged that this code is outdated and unverified, hence results may vary. The functionality with inherited values or complex selectors is uncertain.

// CODE SNIPPET TO EXTRACT CSS
var CSS = function () {
    var _sheet;
    var _rules;
    function CSS() {
        _sheet = document.styleSheets[0];
        if (_sheet.rules) {
            _rules = _sheet.rules; // For IE
        } else {
            _rules = _sheet.cssRules; // Compliant with standards
        }
  
      this.find = function (selector) {  
          var i = _rules.length;
          while(i--){
              if (_rules[i].selectorText == selector) {
                  break;
              }
              if(i==0){break;}
          }

          return _rules[i].style;
      }

        this.set = function (foo) {
            // Functionality yet to be implemented
        }
    };

    return new CSS();
};
// Initialization
var css = new CSS();
// Display output in console log.
console.log(css.find(".regular")); // Pay attention to the empty width property
// Update elements based on the findings
document.querySelector(".seventy").innerHTML = css.find(".seventy").width;
document.querySelector(".pixels").innerHTML = css.find(".pixels").width;
document.querySelector(".regular").innerHTML = css.find(".regular").width;
// Additional tests
document.getElementById("a").innerHTML = css.find("body").color;
document.getElementById("b").innerHTML = css.find("h1").color;
document.getElementById("c").innerHTML = css.find("h1").width;
document.getElementById("d").innerHTML = css.find(".notInDom").color;

body {
  font-family: sans-serif;
  color: black;
  background-color: #cccccc;
}

h1 {
  color: blue;
  font-size: 1.5em;
  font-weight: 400;
  width: 70%;
}

.seventy, .pixels, .regular {display: block; border: 1px solid red;}

.seventy {display: block; border: 1px solid red; width: 70%; }
.pixels { width: 350px; }
.regular {}

.notInDom {
  color: red;
}

<h1>Accessing Style Attributes Directly from the CSS File.</h1>

<div class="seventy"></div>
<div class="pixels"></div>
<div class="regular"></div>

<ul>
  <li>css.find("body").color = <span id='a'></span></li>
  <li>css.find("h1").color = <span id='b'></span></li>
  <li>css.find("h1").width = <span id='c'></span></li>
  <li>css.find(".notInDom").color = <span id='d'></span></li>
</ul>
<p>Please note that this feature is still under development and lacks comprehensive testing. The implementation is rudimentary and has limitations.</p>

Answer 2

To retrieve style information from a CSS file, you can utilize the document.stylesheets method to locate a specific style rule. It is important to note that this approach will only provide the parsed style after it has been interpreted by the browser. If you require the raw unaltered CSS as written in the file itself, then direct parsing of the file content is necessary rather than relying on document.stylesheets.

It should be acknowledged that this code is outdated and unverified, hence results may vary. The functionality with inherited values or complex selectors is uncertain.

// CODE SNIPPET TO EXTRACT CSS
var CSS = function () {
    var _sheet;
    var _rules;
    function CSS() {
        _sheet = document.styleSheets[0];
        if (_sheet.rules) {
            _rules = _sheet.rules; // For IE
        } else {
            _rules = _sheet.cssRules; // Compliant with standards
        }
  
      this.find = function (selector) {  
          var i = _rules.length;
          while(i--){
              if (_rules[i].selectorText == selector) {
                  break;
              }
              if(i==0){break;}
          }

          return _rules[i].style;
      }

        this.set = function (foo) {
            // Functionality yet to be implemented
        }
    };

    return new CSS();
};
// Initialization
var css = new CSS();
// Display output in console log.
console.log(css.find(".regular")); // Pay attention to the empty width property
// Update elements based on the findings
document.querySelector(".seventy").innerHTML = css.find(".seventy").width;
document.querySelector(".pixels").innerHTML = css.find(".pixels").width;
document.querySelector(".regular").innerHTML = css.find(".regular").width;
// Additional tests
document.getElementById("a").innerHTML = css.find("body").color;
document.getElementById("b").innerHTML = css.find("h1").color;
document.getElementById("c").innerHTML = css.find("h1").width;
document.getElementById("d").innerHTML = css.find(".notInDom").color;

body {
  font-family: sans-serif;
  color: black;
  background-color: #cccccc;
}

h1 {
  color: blue;
  font-size: 1.5em;
  font-weight: 400;
  width: 70%;
}

.seventy, .pixels, .regular {display: block; border: 1px solid red;}

.seventy {display: block; border: 1px solid red; width: 70%; }
.pixels { width: 350px; }
.regular {}

.notInDom {
  color: red;
}

<h1>Accessing Style Attributes Directly from the CSS File.</h1>

<div class="seventy"></div>
<div class="pixels"></div>
<div class="regular"></div>

<ul>
  <li>css.find("body").color = <span id='a'></span></li>
  <li>css.find("h1").color = <span id='b'></span></li>
  <li>css.find("h1").width = <span id='c'></span></li>
  <li>css.find(".notInDom").color = <span id='d'></span></li>
</ul>
<p>Please note that this feature is still under development and lacks comprehensive testing. The implementation is rudimentary and has limitations.</p>

Answer 3

Answer №2

function fetchStyle(selector) {
var styleSheets = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var i = 0; i < styleSheets.length; i++) {
if (styleSheets[i].selectorText == selector) {
(styleSheets[i].cssText) ? alert(styleSheets[i].cssText) : alert(styleSheets[i].style.cssText);
}
}
}
fetchStyle('.test');

Answer 4

function fetchStyle(selector) {
var styleSheets = document.styleSheets[0].rules || document.styleSheets[0].cssRules;
for (var i = 0; i < styleSheets.length; i++) {
if (styleSheets[i].selectorText == selector) {
(styleSheets[i].cssText) ? alert(styleSheets[i].cssText) : alert(styleSheets[i].style.cssText);
}
}
}
fetchStyle('.test');

Acquire the CSS percentage value using jQuery

Answer №1

Answer №2

Similar questions

Laravel Ajax 419 Error Occurring in Production Environment, Yet Absent in Local Development, with No Trace in /storage/logs/laravel

Angular 8 allows for dynamic updates as users provide input and make selections with check marks

Generate a new text document in Google Drive using JavaScript

Issues with Twitter Bootstrap Tabs not functioning correctly on Ruby on Rails with HAML

PHP script does not seem to be processing the jQuery AJAX request sent via POST

Can you tell me the distinction between using RemoteWebDriver's executeScript() and Selenium's getEval() for executing

What is the best way to organize controls on my website?

Utilizing the Twitter API 1.1 to retrieve a list of tweets

Yearly Grouping with MongoDB's Aggregate Framework

Creating dynamic forms using JQuery Ajax is an innovative way to enhance

The PHP code doesn't display the slider, whereas it appears on the HTML page

Is there a way to prevent the removal of CSS files from a module when deploying a Next JS API to Vercel?

The delete button using jQuery Ajax is successfully working, however, the data is not being removed

Encountering a Sails.js malfunction while attempting to modify and save a function

The cakePHP time dropdown feature lacks customization options

How to customize the hover background color for multicolored series in Highcharts?

When using ReactJS, the state does not properly update during onChange events if the initial state is derived from props

Transform CSS into React styling syntax

Integration of Tailwind CSS and VueJS single file components within the VS Code environment

html issue with d3.js rendering images: works in firefox, but not in chrome