What is the best way to determine the value of margin-left in inline CSS using jQuery?

Here is the code snippet I am working with:

<div class="ongoing" style="width: +728px; margin-left: +12480px">

I need to extract the value of the margin-left property for scrolling purposes.

The technique I used to retrieve the width value does not work for margin-left due to the hyphen in its name. This was my attempt:

$("div.ongoing")[0].style.margin-left

Could someone provide guidance on how to access the margin-left value?

Many thanks!

Answer №1

To achieve this, you must utilize either of the following methods:

 document.querySelector("div.ongoing").style.marginLeft;

or

 $("div.ongoing").css("marginLeft");//or .css("margin-left");

Answer №2

Check it out: $('div.ongoing').attr('margin-left')

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

Using a for-each loop to wait for the completion of an Ajax process

for (var i = 0; i < theTagNames.length; i++) { var url = baseURL + "?" + "jsoncallback=?" + "&method=flickr.photosets.getPhotos" + "&format=json" + "&api_key=" + api + "&photoset_id=" + theTagN ...

Enhance data validation in PHP

I love using Nicedit as a text editor because it allows me to easily add bold and italic formatting to my form fields. However, when I try to store this text in my database, Nicedit adds HTML tags for bold, italic, and other formatting styles. Is there a ...

Detecting When an Input has an :invalid Selector in Jquery

Here is the code snippet I am currently working with: HTML <input type="text" data-value="1" data-type="input-records" placeholder="Value" pattern="\d{1,4}$" /> CSS input[type=text]:invalid { background-color: red; } Javascript $("[data-ty ...

Enhance Your Website with GatsbyJS Custom Scrollbars

I'm struggling to customize the default scrollbar on my Gatsby website with an overlay scrollbar. I want to avoid the page 'shifting' slightly to the left when switching between pages that have scrollbars and those that do not. My attempt i ...

Conceal specific image(s) on mobile devices

Currently, I am facing an issue on my website where I need to hide the last two out of six user photos when viewed on mobile or smaller screens. I believe using an @media code is the solution, but I'm unsure about the specific code needed to achieve t ...

Having a jammed cursor with Knockout + draggable/droppable extensions, anyone else experiencing this issue?

Trying to alter the cursor of a dragged element using the conventional method: $(element).draggable({ revert: "invalid", revertDuration: 0, cursor: "move" }); but for some reason, when an element is dropped ...

Preserving Search and Filter Settings in jQuery Data Tables

I've been working with a datatable and I'm trying to figure out how to keep dropdown filters and search parameters saved when the page is reloaded, just like shown in the screenshot below. However, I also want these parameters to be cleared if th ...

Create a function that adds a new div element with a one-of-a-kind identification when

I am currently developing a web application on www.firstusadata.com/cash_flow_test/. The functionality involves two buttons that add products and vendors dynamically. However, the issue I'm facing is that the appended divs do not have unique IDs, maki ...

Ensuring Navigation Elements Remain Aligned in a Single Line

I'm in the process of developing an interactive project that will be showcased on a touch screen. One of its key features is a fixed footer navigation. Currently, I am using floats to position the main navigation elements and within each element, ther ...

What is the best way to increase the size of a specific text style?

Recently, I created a post in WordPress that included some code samples. To ensure the code was displayed neatly, I utilized the "preformatted" style. However, upon previewing it, I noticed that the text within the code samples was incredibly small, almost ...

Tips for emphasizing specific text within HTML tags without highlighting the tags in Vue

I am using a tag with v-html to render HTML text and display it, like so: <div v-html="htmlText"></div> I have written code to highlight text and it works on regular text: Vue.filter('highlight', function (word, query) { ...

CodePen displaying CSS errorsI'm having trouble getting my CSS

I'm facing an issue with my CSS code and I need your help to figure out what's wrong. I believe it's a simple problem that someone can quickly identify just by looking at the code. Any assistance would be greatly appreciated! Here is the co ...

Unable to change Bootstrap variables within a Next.js project

I'm having trouble changing the primary color in Bootstrap within my NextJS project. I've tried different methods but nothing seems to work as expected. Here is the code snippet from my "globals.scss" file that I imported in "_app.js": $primary: ...

Make a request to the local API in a React Native mobile app by sending a GET request

Currently, I am working on a mobile application using React Native and utilizing SQL Server and NodeJS. The API for this project is located in my localhost. Upon running the application on an emulator, I encountered an issue when attempting to make a reque ...

What is the best way to keep a <div> class anchored to the bottom of an HTML page?

I am looking to incorporate a footer into my website that stays fixed at the bottom of the screen. However, I have encountered an issue: Here is what I have attempted so far: .footer { position: absolute; width: 100%; background: #0084FF; ...

Trouble with CSS display in Internet Explorer 8

My website located at this link is working perfectly in IE 10 and IE 11, however, any version lower than that is causing the content to be displayed on the far left of the screen instead of centering it. I have tried tweaking the CSS but can't seem to ...

Implementing a click event on an image in an Angular 4 application

I'm facing an issue with adding a click event to an image within an Angular component. I have tried the following code: <img src="../../assets/add.svg" width="18" height="18" (click)="addItem()"> However, this approach does not seem to work as ...

Dealing with asynchronous tasks in JavaScript

I am currently delving into the world of Node development and struggling to grasp the asynchronous nature of JavaScript and Node.js. My project involves creating a microservices backend web server using Express in the gateway service, which then translates ...

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 ...

Utilize the `npm ls somepackage` command to adhere to version range specifications

I need to utilize npm ls to pinpoint the source of security warnings. Reference to the documentation states that: Positional arguments consist of name@version-range identifiers, which will restrict the outcomes to only the paths leading to the specified ...