To grab a specific CSS attribute from a stylesheet using JavaScript

I am looking for a way to extract the value from a CSS file using a JavaScript function.

Take a look at my code snippet below:
HTML file ->

    <link rel="stylesheet" type="text/css" href="test_css.css" />
    <script type="text/javascript">
    function loadFunc(){ 
    ## need code here
    ## alert(left);
    }
    </script>

CSS file ->

    .outer .inner
    {
    left: 30pt;
    top: 20pt;
    }

Note: I only require the specific property value from the CSS, not the entire text. Is there a predefined function that can help me achieve this?

For instance, I want to retrieve the value associated with the key "left" in the CSS file. The expected output should be "30pt".

javascripthtmlcss

Answer №1

Executing this function with the specified attributes will result in the expected output.

    function fetchStylePropertyValue(prop, selector, stylesheet) {
      var stylesheets = typeof stylesheet !== 'undefined' ? [stylesheet] : document.styleSheets;
      for (var index = 0, len = stylesheets.length; index < len; index++) {
        var currentSheet = stylesheets[index];
        if( !currentSheet.cssRules ) { continue; }
        for (var j = 0, k = currentSheet.cssRules.length; j < k; j++) {
          var cssRule = currentSheet.cssRules[j];
          if (cssRule.selectorText && cssRule.selectorText.split(',').indexOf(selector) !== -1) 
             return cssRule.style[prop];            
         }
       }
      return null;
     }

    var textColor = fetchStylePropertyValue('color', '.classproperty'); // applicable to all stylesheets

Answer №2

To apply CSS to elements, utilize jQuery along with the .css function. Additional resources can be found here: http://api.jquery.com/css/

Note: Ensure that you have the specified style visible on your webpage before using this method. If the style is not present, consider creating a hidden div for the CSS selector to target.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

When you initiate a prevent default, both the Angular and Bootstrap UI tabs will become active simultaneously

I am facing a CSS issue while utilizing Angular UI-Tab. The problem arises when I have two tabs and need to stop tab switching based on a specific condition. To achieve this, I implemented prevent default. However, the CSS displays both tabs as active bec ...

cssangularjstwitter-bootstrapangular-ui-bootstrapangular-ui-tabset

What methods and technologies are accessible for executing JavaScript through PHP?

Are there any frameworks or tools available to execute JavaScript from PHP? Is there a similar project like the Harmony project for PHP? I am interested in running JS unit tests (or even BDD) directly from PHP, as demonstrated in this post (for Ruby). Am ...

phpjavascriptunit-testingtddbdd

Animating a CSS overlay

My goal is to design an overlay using the following HTML and CSS code snippets div.relative { position: relative; width: 400px; height: 200px; border: 3px solid #73AD21; } div.absolute { position: absolute; top: 50%; right: 0; width: 20 ...

htmlcssanimationoverlay

I am encountering an issue stating "indexRouter has not been defined"

Encountering an error "indexRouter is not defined" while attempting to run the code below. Despite attempts to remove the line, additional errors persist. Can anyone clarify the rationale behind using the common variable router for both index.js and user.j ...

javascriptnode.jsexpressrender

floating downward inside the container

Check out my website at . Everything looks great in Firefox, but when I view it in IE, the "top" button that should be floated inside the h2 titled "Unit 301: Pre-production skills" is floating to the right and getting pushed outside of the heading. Any i ...

htmlcss

Incorporate unique color variables from the tailwind.config.js file

I am working on a project using nextjs and typescript, with tailwind for styling. In my tailwind.config.js file, I have defined some colors and a keyframe object. My issue is how to access these colors to use as background values in the keyframe. Here is ...

javascriptcssreactjsnext.jstailwind-css

Pass an image into an input field with the attribute type="filename" using JavaScript directly

My goal is to automate the process of uploading images by passing files directly to an input type="filename" control element using JavaScript. This way, I can avoid manually clicking [browse] and searching for a file in the BROWSE FOR FILES dialog. The re ...

javascripthtmlupload

The function Sequelize.create() does not exist

My attempts to push my DB with sequelize are not working, even though I have set up this schema for the DB: module.exports = (sequelize, DataTypes) => { const Problems = sequelize.define("Posts", { theme: { type: DataTypes.ST ...

javascriptmysqlexpresssequelize.js

Error Encountered: POST method not supported in ajax request using djangoIs this a

I am currently encountering an issue while trying to pass form data values through ajax. I keep getting a method not allowed error when attempting to add a comment on a blog post. The form below is located inside the blog_detail page: <form id="co ...

javascripthtmljsondjangoajax

Placing the IconButton within an AppBar Component using React-JS

Trying to position two IconButtons within a Toolbar, one on the right side and the other on the left side. However, both are ending up on the right side. Here's my code: <AppBar position="fixed" > <Toolbar> <Ic ...

javascriptreactjsmaterial-ui

Displaying an error or success message upon submitting a form is currently not functioning as

I have implemented a registration/login system on my website, and currently, it shows errors and success messages at the top of the page. I want to display these messages under the form instead. However, every time I attempt to place them below the form, i ...

phphtmlforms

Component built in ReactJS for file uploads to a server running on Spring MVC/Data-REST

For quite some time, I have been on the lookout for a ReactJS component that enables file uploading from a browser, with the ability to save it to the server where the ReactJS application is deployed. I've come across several components that facilita ...

javascriptajaxhtmlbrowserreactjs

The 'id' field was anticipating a numerical value, but instead received 'bidding'

When constructing a HTML page based on a model, I encountered an issue with a form that seems to be causing interference with the model being used for building the page. The error message I received is: Exception Type: ValueError at /bidding Exception Va ...

pythonhtmldjangoforms

Navigate within a div using arrow keys to reposition another div

As a newcomer to JavaScript, I am facing some challenges. My goal is to use arrow keys to move a small div inside a larger div. However, the code below is not functioning as expected. Here is the HTML and CSS: <div id="rectangle"> <div id="s ...

javascript

Having trouble transmitting data from the View to the Controller

Need help with this issue. I'm having trouble passing my data to the controller. Below is my ajax code. <script type="text/javascript"> $(document).on("click", "#login_button", function () { var userName = document.getElementById(" ...

javascriptc#jqueryajaxasp.net-mvc

Creating a View-Model for a header bar: A step-by-step guide

I am looking to develop a View-Model for the header bar using WebStorm, TypeScript, and Aurelia. In my directory, I have a file named header-bar.html with the following code: <template bindable="router"> <require from="_controls/clock"></ ...

javascriptangulartypescriptwebstormaurelia

Ways to disable the ability to close a bootstrap modal by pressing the backspace key

How can I enable the backspace button in a Bootstrap Modal form for textboxes and textareas? $('body').keydown(function (e) { if ($('#myModal').is(':visible')) { if (e.keyCode == 8) { retu ...

javascriptjquerycsstwitter-bootstrap

What is the best way to conceal a div element on a Razor Page depending on the user's input?

How can I display the state field only when the user selects United States in the country field, and hide it otherwise? Here is the code snippet from my cshtml page: <div class="form-group col-sm-4 mt-4"> <label asp-for="Form.Co ...

c#htmlcssasp.net-corerazor-pages

What is the best way to determine the index of the area that was clicked on in chartjs?

I am currently working with a chart that may not have elements at specific indices, but I am interested in determining the index of the area clicked. When hovering over an area without an element, the assigned tooltip is displayed. I would like to achieve ...

javascriptcharts

What is the Ideal Location for Storing the JSON file within an Angular Project?

I am trying to access the JSON file I have created, but encountering an issue with the source code that is reading the JSON file located in the node_modules directory. Despite placing the JSON file in a shared directory (at the same level as src), I keep r ...

javascriptangular