Generating a CSS rule based on a query string

Question

Generating a CSS rule based on a query string

Receive query string

var queryString = window.location.search;

Eliminate ? from the start of the query string

queryString = queryString.substring(1);

Query string handler

var parseQueryString = function( queryString ) {
    var params = {}, queries, temp, i, l;
    // Break down into key/value pairs
    queries = queryString.split("&");
    // Convert the array of strings into an object
    for ( i = 0, l = queries.length; i < l; i++ ) {
        temp = queries[i].split('=');
        params[temp[0]] = temp[1];
    }
    return params;
};

// Query string object

var pageParams = parseQueryString(queryString);

// CSS variables

var target = pageParams.target;
var prop = pageParams.prop;
var value = pageParams.value;

// Unable to get it working -->

jQuery(target).css({
    prop : value,
});

I aim to input a query similar to this "?target=body&prop=display&value=none" and hide the whole body or target specific elements by their class.

javascript jquery css query-string

Answer 1

Answer №1

Using prop as a key-variable for the object passed to .css() is not feasible. It would result in the literal string 'prop'. Instead, consider using:

jQuery(target).css(prop,value);

Caution: Watch out for that trailing comma in the hash (after value). Some browsers may throw an error at that point.

Answer 2

Using prop as a key-variable for the object passed to .css() is not feasible. It would result in the literal string 'prop'. Instead, consider using:

jQuery(target).css(prop,value);

Caution: Watch out for that trailing comma in the hash (after value). Some browsers may throw an error at that point.

Answer 3

Answer №2

To easily create a CSS object that can be passed to jQuery, I would suggest the following approach:

// Define and populate css object
var cssObject = {};
cssObject[property] = value;

After implementing this code snippet, everything seemed to work perfectly for me. For more details, you can check out the complete solution here:

http://jsfiddle.net/abc123/7/

I also recommend using a regex to remove any question marks as indicated in the comment below.

Answer 4

To easily create a CSS object that can be passed to jQuery, I would suggest the following approach:

// Define and populate css object
var cssObject = {};
cssObject[property] = value;

After implementing this code snippet, everything seemed to work perfectly for me. For more details, you can check out the complete solution here:

http://jsfiddle.net/abc123/7/

I also recommend using a regex to remove any question marks as indicated in the comment below.

Generating a CSS rule based on a query string

Answer №1

Answer №2

Similar questions

Solution for Organizing Tables

The function `jQuery .html('<img>')` is not functional in Firefox and Opera browsers

The type 'number' cannot be assigned to the type 'Element'

Validation in Angular2 is activated once a user completes typing

How to toggle the visibility of specific div elements within a v-for loop depending on their content?

Can I simultaneously execute nodemon and browser-sync using a single npm script for an Express application?

Tips for aligning buttons vertically within the form-row class in Bootstrap 4

NodeJS: The functionality of my node files relies on the variables defined in another file

The specified type '{ state: any; dispatch: React.Dispatch<{ type: string; value: any; }>; }' is not compatible with the expected type

When using jQuery's $.post method and encoding data as JSON with json_encode(), the output includes quotation marks

Float: A threshold reached when adding 1 no longer has any effect

Struggling to implement custom media queries in a bootstrap theme

JavaScript allows the "Enter" key to perform a specific action

Step-by-step guide on sorting WordPress posts by a custom field date

Connecting files within a directory using the Shiny framework

Having trouble getting $.ajax to work with ASP.NET?

Searching for an element by a unique custom attribute in jQuery

Is there a way to incorporate a Laravel foreach loop within a JavaScript file?

JSON.stringify not behaving as anticipated

Creating a fresh array by applying a filter and assigning keys