Jquery .Css() Function with Variables and Multiple Values

jQuery .css() function with variables and multiple values

You shouldn't have the quotes around the whole thing:

$('h1').css({
    'font-size': victore + "em",
    'color':'red'
});

Change CSS on Multiple Javascript Variables

Easy Solution:

If you have already multiple variables defined, you can select them all with a jQuery selector function, and then just perform the CSS on that one selector:

$([ n2, n3, n4, n5, n6 ]).each(function() {
    $(this).css({ 'position' : 'absolute', 'opacity' : '0'});
});

Update: Edited above exaple to work. Must iterate over this with an each() function.

---

Alternative Solution:

If you have to a similar operation multiple times, either:

1. Select all of the elements into a single jQuery variable like the other answers say (inflexible solution).
2. Add a common class to all the variables and then operate on that class (dynamic solution).

Passing variables with jquery css function doesn't work?

try this

 jQuery(this).css('-ms-grid-row', x.toString())

jQuery .css() function not working with variable

You can access the contents of pCssProperty for your css object by creating the object first and then assigning the key:

var cssObj = {};
cssObj[pCssProperty] = inputValue;
$(elementClass).css(cssObj);

...or use this ES6 shorthand to do the same thing:

$(elementClass).css({[pCssProperty]: inputValue})

$(document).ready(function() {  $('input').blur(function() {    var inputName = $(this).attr("name");    updateCSS(inputName, 'button-style-one', 'background-color');  })
  // Function to update CSS  function updateCSS(pInputNameAttribute, pElementClass, pCssProperty) {    var inputName = '[name=' + pInputNameAttribute + ']',      elementClass = '.' + pElementClass,      inputValue = $(inputName).val();
    $(elementClass).css({      [pCssProperty]: inputValue    });  }});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><form action="submit.php" method="post" id="buttonSettings">  <input type="text" name="button_background_color" placeholder="Background Color"></form>
<a href="#" class="button-style-one">Button</a>

Passing variables to jquery .css() function

You are passing a string to the .css() method, this means you are using it as a getter and not a setter.

I would suggest using HTML5 data-* attributes, here data-styles is a string representation of an object, by using jQuery .data() method you will have an object:

<a data-styles='{ "width": "1000px", "prop": "value" }' 
   data-selector="#page"
   class="styleswitch">
      Boxed
</a>

JavaScript:

$('a.styleswitch').on('click', function() {
   var data = $(this).data();
   $(data.selector).css(data.styles); 
});

http://jsfiddle.net/7t4Jb/

Get multiple CSS properties with jQuery

You can create your own jQuery function to do this:
​

//create a jQuery function named `cssGet`
$.fn.cssGet = function (propertyArray) {

    //create an output variable and limit this function to finding info for only the first element passed into the function
    var output = {},
        self   = this.eq(0);

    //iterate through the properties passed into the function and add them to the output variable
    for (var i = 0, len = propertyArray.length; i < len; i++) {
        output[propertyArray[i]] = this.css(propertyArray[i]);
    }
    return output;
};

Here is a demo: http://jsfiddle.net/6qfQx/1/ (check your console log to see the output)

This function requires an array to be passed in containing the CSS properties to look-up. Usage for this would be something like:

var elementProperties = $('#my-element').cssGet(['color', 'paddingTop', 'paddingLeft']);
console.log(elementProperties.color);//this will output the `color` CSS property for the selected element

How to define multiple CSS attributes in jQuery?

Better to just use .addClass() and .removeClass() even if you have 1 or more styles to change. It's more maintainable and readable.

If you really have the urge to do multiple CSS properties, then use the following:

.css({
   'font-size' : '10px',
   'width' : '30px',
   'height' : '10px'
});

NB!

Any CSS properties with a hyphen need to be quoted.

I've placed the quotes so no one will need to clarify that, and the code will be 100% functional.

Multiply jquery selectors with variables

Need to use string concatenation for the second selector

$(document).on('change', '#popfrom, #'+ adddatedropper, function()

Or you can use add for add two elements

$(adddatedropper).add(addtimedropper).

var adddatedropper ="#div1";var addtimedropper ="#div2";var both = adddatedropper +' , ' + addtimedropper;
$(document).on("click",both,function() {    alert("click bound to document listening");});

$(adddatedropper).add(addtimedropper).on('click', function() {  alert("click bound to document listening");});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='div1'> div 1</div><div  id='div2'>div 2</div>

jquery combining multiple variables (elements set as vars)

This is riding the line of a duplicate question to: How to combine two jQuery results

One slight difference is you'd have to pass each collection individually, eg:

var allMenuObjects = menuWrapper.add(menuIcon).add(menuTrigger).add(contentWrapper);

Hopefully this helps and I appreciate your efforts in understanding how to use jQuery efficiently. (eg without engaging the selector engine repeatedly)

How can I get multiple variables from a function in javascript

Return an object, like this:

function thing() {
    return {
        item1: 1,
        other: {
            item2: 2,
            item3: 3
        }
    };
}

var things = thing();
var item1 = things.item1;
var item2 = things.other.item2;
var item3 = things.other.item3;

---

Related Topics