The output of element.css('left') is 'auto' despite not being specific to iPhone Safari

I am facing an issue with extracting and setting the left CSS property of an element using Javascript. The element has the left property defined inline, which I can see in Safari's inspect tool on my Mac while debugging for Safari on my phone.

However, when I use the following functions:

console.log(getComputedStyle(reporting_table.find('thead.tableFloatingHeaderOriginal')[0]).getPropertyValue('left'));

console.log(reporting_table.find('thead.tableFloatingHeaderOriginal').css('left'));

...both methods return 'auto' instead of the actual inline style value. Interestingly, this code works correctly in Chrome. Can anyone explain why JavaScript behaves differently in mobile Safari?

https://i.sstatic.net/CIU3z.png

Here is the inline style image.

https://i.sstatic.net/v6wR6.png

And here is the console log showing the incorrect 'left' property value.

javascriptjquerycssmobile-safari

Answer №1

If you're not sure whether it will work for your specific case, you can give it a try by simply selecting the style attribute and the CSS property. Just remember to pass in the index as well. For example, in your situation, you could use 

$(".tableFloatingHeaderOriginal")[0].style.left

var x = $(".test")[0].style.color;
console.log(x)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="test" style="color:red;border:1px solid blue;width:100px;display:inline-block"> Hello</div>

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

Interactive form found on a webpage

Hey there! I'm currently working on a task where I want a form to be displayed when the edit button is clicked. Once the save button in the form is pressed, I want to update my database with the new information. It's crucial that this process hap ...

javascriptjqueryajaxforms

What could be the reason for box-shadows not appearing properly on Safari browsers?

Why are box shadows with decimals sometimes not displayed in Safari? Is there a solution to this issue? Here's an example of the code: div { width: 200px; height: 200px; box-shadow: 0px 0.0351725rem 0.0351725rem 0px, 0px 0px 0px 0.0175862re ...

htmlcsssafaribox-shadow

Creating interactive touch events on an HTML canvas with a scrollbar

Hello there, I'm currently working on developing a touch-enabled signing app that utilizes 2 HTML Canvases. The issue I am encountering is that when I scroll to focus on the second canvas, my ability to sign on it stops working properly. It appears t ...

javascriptandroidhtmlcanvas

Jquery Menu featuring subitems aligned to the right

I am experiencing an issue with my drop-down menu in ie6. The subitems menus are shifted to the right, rendering the menu useless. Here is the HTML code: <div id="navigation"> <a href="<?php echo base_url();?>" class="singl ...

jquerycssmenu

Troubleshooting issues with NodeJS server and client connectivity on Cpanel

I've successfully created a nodejs application that functions as a websocket server and serves a basic client webpage. The websocket is running on port 8080, and the client connects through wss://192.168.3.101:8080 when tested locally. However, when I ...

javascriptnode.jswebsocketcpanel

Displaying search results in various Angular components

On my home page (homePageComponent), I have a search feature. When the user clicks on the search button, they are redirected to a different page called the search list page (searchListComponent). Within the searchListComponent, there is another component c ...

javascriptangulartypescriptangular-ui-routerangular-directive

The Design and Layout of a MEAN Stack Application

When creating a MEAN Stack app using the express-generator npm, everything worked perfectly but I found myself confused about the purpose of certain files. For instance: The package.json included this code snippet: "script":{"start": "node ./bin/www"} ...

javascriptnode.jsexpressmean-stackexpress-generator

List items are not visible and there is no option to dynamically add new items to the list

The code is causing issues with adding new items to the list and displaying already added items. The button symbol is also not showing up. list.ejs To Do List <%= listTitle %> <% for(var i=0;i<=newListItems.length; i++) %> ...

javascriptnode.jsexpress

Stopping the recursive function call in AngularJS

Utilizing the following function to retrieve users from a REST API, paginated by offset. Upon successful callback, the function recursively calls itself with a new offset to fetch the next set of users. Issue: When I change or exit the view, the FetchAtte ...

javascriptangularjsrecursionionic-framework

Issue with factory function failing to return any data

I am using an angularjs factory to retrieve data with the $http.get() method: 'use strict'; app.factory('apiService', ['$http', function ($http) { var apiService = {}; apiService.urlBase = 'http://localhost:1337/ ...

javascriptjqueryangularjsangularjs-factory

Ways to manage the gap among flex items

I'm currently going through some educational material on Codeacademy, and I'm curious about how I can control the spacing between the "locations" text and the three divs below it. The task requires me to create a 15px gap between them, but I am u ...

cssflexbox

How can I implement Google Analytics Event tracking for all <audio> tags using Javascript?

I am looking to implement a Google Analytics Event for all audio tags on my website. Currently, I have a script that targets audio tags with a specific class: <script> /* a test script */ $(function() { // Execute function when any element with t ...

javascriptaudiogoogle-analytics

The Angular date picker is overly verbose in its data output regarding selected dates and requires optimization

Using Angular 5, I have integrated a specific npm package for handling dates import { OwlDateTimeModule, OwlNativeDateTimeModule } from 'ng-pick-datetime'; The problem arises when trying to send data to the server in this required format only ...

javascriptangulartypescriptdatepicker

Is there a way to prevent $http from automatically converting my data into a string enclosed in quotes before sending it?

I'm having some difficulty with formatting the data correctly for an Angular $http POST call to an OAuth token service. Currently, I am parameterizing a simple object like this: $.param({ grant_type: "password", username: 'myuse ...

jqueryangularjs

Implementation of Vue.js for filtering search results in a list view

I would like to enhance my searching functionality by including both header and content. Currently, the search is only based on content. Any recommendations on how to modify this source code to accomplish that? Thank you Below is the HTML snippet: <di ...

javascriptvue.jsvuejs2

Vue infinite loop occurring in a method

I keep receiving this warning [Vue warn]: You may have an infinite update loop in a component render function. and I believe I have pinpointed the reason behind it. My Scenario : I am passing an object with an index to a Vue method within a loop. Computed ...

javascriptvue.jsvuejs2

The issue arises when the Javascript function is triggered twice, resulting in only 3 out of 4

I'm currently working on a JavaScript calculator project. Everything is running smoothly except for the add() function (subtraction, multiplication, and division are all functioning properly). Additionally, when I hit "=" it displays the answer twice ...

javascripthtmlformsdom-events

Is there a way to incorporate Actions into the tool-bar on the Dashboard of Jupyter Notebook?

I am currently in the process of developing a customized front-end extension for Jupyter Notebook. I plan to have buttons on both the Notebook Dashboard and Editor that will trigger various actions. Similar to the existing "Move" and "Duplicate" buttons, ...

javascriptjupyter-notebook

How can you stop previously stored information from being displayed when clicking on Json?

I'm facing a simple issue with JSON data Below is the JSON code I am working with: { "id" : "1", "name" : "test1" }, { "id" : "2", "name" : "test2" }, { "id" : "3", "name" : "test3" }, { "id" : "4", "name" : "test4" }, { "id" : "5", "name" : ...

phpjqueryjsonajax

Attempting to align two parent divs within a container div to appear side by side, while ensuring that one of the parent divs repeats multiple rows without impacting the second parent

I am in the process of building a custom WordPress theme from scratch, and I have created a template for the posts that will dynamically appear on the front page. To achieve the desired layout, I am utilizing Bootstrap 5. The structure includes a containe ...

htmlcsswordpress-themingbootstrap-5