Setting line height as a pixel value does not yield the desired result

$(element).css(options.css).attr(options.attr).addClass(options.class)
//ensure line-height is correctly assigned
if($(element).is('p') && _.isString(options.css['line-height'])){

  console.log('line-height assigned: '+ options.css['line-height'] + ' , and now = ' + $(element).css('line-height'))

}

output:

line-height assigned: 15px, and now = normal
line-height assigned: 15px, and now = normal 
line-height assigned: 15px, and now = normal 
line-height assigned: 15px, and now = normal 
line-height assigned: 15px, and now = normal 
line-height assigned: 33px, and now = normal

Why can't I set line-height in pixels....

Check out the jsfiddle (which works fine):

http://jsfiddle.net/wyvernmonarch7/S9Scd/

I'm not sure what's wrong with my code, but something seems off... any ideas?

EDIT: options.css, options.attr, and options.class are all OBJECTS. There are no errors in my code. Removing options.attr and options.class doesn't change anything. Here's the console log from options.css

Object {line-height: "15px", width: 87, height: 15, font: "11px arial", color: "#FFFFFF"…}
color: "#FFFFFF"
display: "none"
font: "11px arial"
font-weight: 400
height: 15
line-height: "15px"
pointer-events: "none"
text-align: "center"
width: 87
__proto__: Object

line-height assigned: 15px, and now = normal 
Object {line-height: "15px", width: 87, height: 15, font: "11px arial", color: "#FFFFFF"…}
color: "#FFFFFF"
display: "none"
font: "11px arial"
font-weight: 400
height: 15
line-height: "15px"
pointer-events: "none"
text-align: "center"
width: 87
__proto__: Object
line-height assigned: 15px, and now = normal
Object {line-height: "15px", width: 87, height: 15, font: "11px arial", color: "#FFFFFF"…}
color: "#FFFFFF"
display: "none"
font: "11px arial"
font-weight: 400
height: 15
line-height: "15px"
pointer-events: "none"
text-align: "center"
width: 87
__proto__: Object

line-height assigned: 15px, and now = normal

//////////////

EDIT: running after window.load

jquerycssheightlinepixel

Answer №1

When utilizing jQuery's .css() as a setter, make sure to provide it with an Object instead of an Array. Your choices should be structured like this:

choices = {
  css: {
    'font-size': '16px'
  }
}

For more information, refer to the jQuery documentation here: http://api.jquery.com/css/#css-properties

Here is a simplified fiddle showcasing your options.css: http://jsfiddle.net/AbCdE/1/

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

Translate CSS into JavaScript while maintaining selector understanding

I am interested in developing a tool that can read a .css file and generate a function that will accept an array of class names as input and output the corresponding styles for an element with those classes, represented as a JavaScript object. This tool wo ...

javascriptcsscss-modulescss-parsingglamorous

"Transmitting an ajax POST call and receiving a corresponding GET response

Currently, I am utilizing the following AJAX code: $.ajax({ url: "Editor.aspx/Page_LoadComplete", data: { "contentCheckCode": contents }, type: "POST", success: function (response) { alert("Contents saved..."); }, error: fu ...

c#javascriptjqueryasp.netajax

Is there a way to execute an SQL query using ajax?

I recently came across an interesting problem involving passing an SQL query through to an ajax file. let qry = mysqli_query($this->con,"SELECT * FROM products"); To ensure proper containment, I embedded the variable within HTML using the following co ...

phpjquerymysqljsonajax

Troubleshooting techniques for interacting with input fields in Django-admin tabular inlines through ajax

Seeking ways to dynamically update inline entries with ajax. For instance, as the user chooses an item from the dropdown box, the associated input fields can auto-fill with data. The ajax views.py section should be relatively simple. However, one hurdle I ...

jqueryajaxdjangodjango-admin

Perform an Ajax request to a PHP function using an array as the data payload within the WordPress platform

I have been struggling to send an array from jQuery to a PHP function and have tried various methods without success. I've experimented with $_request, $_post, using JSON.stringify, not using JSON.stringify, but all I get is 'null'. Can anyo ...

phpjqueryarraysajaxwordpress

using variables as identifiers in nested JSON objects

Within my code, there is a JSON object named arrayToSubmit. Below is the provided snippet: location = "Johannesburg, South Africa"; type = "bench"; qty = 1; assetNumber = 15; arrayToSubmit = { location : { type : { 'qty' ...

javascriptjqueryjson

use ajax to post saved data to a WebAPI in php

I have successfully implemented the code to save data in a custom table using Ajax. Now, I need to figure out how to send this data to an asp.Net API using js/jQuery. How can I achieve this? Below is my HTML form and JS code: <div id="inline1" class= ...

javascriptphpjqueryajaxasp.net-web-api

Ensure the user is authenticated following an asynchronous request

Currently, I am working with Cake PHP 2.4 and encountering an issue where my AJAX requests fail to work after the session has been idle for a while or if the user logs out in another tab. This is due to the fact that the user is already logged out when the ...

phpjqueryajaxcakephp

Themes in Next.js with a splash of color

Is there a way to implement theming with color picking for elements? Check out the example here. I've explored using CSS variables and changing the document classname, but I'm uncertain if this is the best approach. @tailwind base; @tailwind com ...

cssreactjsnext.jsthemescss-variables

The device-width value in the viewport width setting is causing issues

My angular app desperately needs a mobile responsive design as it currently looks dreadful on mobile devices. I've tried adding <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=yes">, but ...

htmlcss

the spillage exhibits only a thin streak of gray

My website is primarily a Single Page Website, however, there are specific pages that can only be accessed by registered users. On the website, there is a section referred to as a "block" where you will find a button labeled "Login / Register". Upon clicki ...

javascriptjqueryhtmlcssoverflow

I'm having trouble getting this button and icon to align properly. How can I fix this misalignment

Take a look at the HTML code snippet I'm currently working on... <div id="projects"> <H1 class="projects">PROJECTS</H1> <div class="box"></div> <div class="box"></div> <div class="box"></ ...

htmlcss

Positioning the box in the middle of pages

I have a website page at the following link: However, the content is not centered on the screen. Here are the codes I'm using: <div class="section_inner"> <div class="container"> <div class="row"> <?ph ...

htmlcss

Extract JSON data from a third-party website using JavaScript

I'm facing a challenge parsing JSON from an external website using JavaScript or jQuery for a Chrome extension. Specifically, I need to extract the number from an external URL with the JSON {"_visitor_alertsUnread":"0"} and assign that number to a var ...

javascriptjqueryajaxjsongoogle-chrome-extension

Retrieve an array from the success function of a jQuery AJAX call

After successfully reading an rss file using the jQuery ajax function, I created the array function mycarousel_itemList in which I stored items by pushing them. However, when I tried to use this array in another function that I had created, I encountered t ...

javascriptjqueryajax

Establishing REST parameters for jQuery to consume a web service

Currently, I am utilizing jQuery to consume a custom-built web service that serializes input into JSON and outputs it via jQuery AJAX. I am interested in enhancing the RESTfulness of the service by incorporating URI query string parameters. This would ena ...

jqueryajaxjsonrest

The navigation bar in Bootstrap 3.2 expands in size as you scroll past it

Whenever I reach the bottom of the page, the navigation bar suddenly enlarges. The navbar is located at the top of my code. I attempted moving the navigation to the bottom of the code... but it didn't fix the issue... Could someone please identify wha ...

jquerycsshtmltwitter-bootstrap

Check out this stylish Twitter-inspired SVG text counter created with a combination of CSS and jQuery! See it in action here: https://jsfiddle.net/moss24

Looking to develop a text counter similar to Twitter that increases the width in green color up to 75%, then switches to yellow until 98%, and finally turns red if the input value is greater than or equal to 400. It should also add a "highlight" class when ...

javascriptjquerycss

breaking up the text enclosed in parentheses

Within my code, I have a variable var string = (2200 x 1500)(2441 x 1610) The goal is to split this string into arrays based on the content within the brackets. Meaning that href[0] = (2200 x 1500) and href[1] = (2441 x 1610) I attempted the following ap ...

jquery

Styling targeted div class elements with specific input elements

I have a group of input text elements on my webpage. I am looking to style the div element with the "forms_in_ap" class that contains the #email, #reEmail, #nogInFirstName, and #nogInAccNumber elements specifically for Safari browsers on MAC and IOS device ...

htmlcss