javascript method to apply styling

I'm puzzled by how these two javascript/css codes can yield different results:

1st:

prev.setAttribute('style', 'position:absolute;left:-70px;opacity:0.4;border-radius: 150px;-webkit-border-radius: 150px;-moz-border-radius: 150px;');

2nd:

prev.setAttribute('style', 'opacity:0.4;border-radius: 150px;-webkit-border-radius: 150px;-moz-border-radius: 150px;');
prev.setAttribute('height', size);
prev.setAttribute('width', size);
prev.setAttribute('id', 'thumb'+i);
prev.setAttribute('position', 'absolute');
prev.setAttribute('left', '-70px');

In the 2nd code block, the properties position and left seem to be ignored entirely. The resulting output remains the same whether those lines of code are present or absent.

It seems that prev.style.left is necessary for it to work, similar to the behavior with the position property. However, using setAttribute does work for setting height and width. I'm really curious to understand why this difference occurs.

javascriptcsssetattribute

Answer №1

position and left should be applied as styles, not attributes.

On the other hand, width, height, and id can function as both attributes and styles, which explains why they are effective in your second demonstration.

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

Is there a way to switch the language on the date-picker tool?

My date-picker has a unique set up: <input type="text" ng-readonly="true" class="form-control" datepicker-popup="yyyy-MM-dd" ng-model="filter.FInicial" is-open="filter.controlFInicialAbierto" min-date="minDateIni" max-date="maxDat ...

javascriptc#angularjsinternationalization

What are the steps to modify or remove a node in react-sortable-tree?

I am currently working on implementing a drag and drop tree view using react-sortable-tree. Along with that, I also need to incorporate CRUD operations within the tree view. So far, I have been successful in adding, editing, and deleting nodes within the p ...

javascriptarraysjsonreactjsfluent-ui

Tips for getting information from firestore by implementing a where clause specific to a field within an object?

In my React Native project, I am utilizing Firebase Firestore as the backend database. I have successfully retrieved data from the database using the following code: unsubscribe = firebase.firestore().collection('messages').where('user&apos ...

javascriptfirebasereact-nativegoogle-cloud-firestorereact-native-firebase

When applying a maximum width of 100% with automatic height, images may become cropped

I'm a beginner in learning CSS, and since my technical skills are limited, I'll try to keep things simple. Currently, I have an image taking up half of the screen with the following CSS code that I found after reading some articles: <div class ...

htmlcss

Looking to handle a .csv file containing both quotes and commas within the quotes in Node.js - how can I achieve this

My code solution successfully parses a CSV file, but it doesn't handle cases where data has commas within quoted fields. For example, "not, accounted","normal". let filePath = Path.resolve(__dirname, `./MyData.csv`); let data = fs.readFileSyn ...

javascriptnode.js

Refreshing the page resolves unhandled errors that occur when an item is removed from local storage

I'm currently working on adding a logout button to my website. I have the user's token saved in local storage, but when the logout button is clicked and the token is removed from local storage, an error occurs upon redirecting back to the login p ...

javascriptreactjssyntax-errorlocal-storage

Retrieving a variable from a JSON array with multiple dimensions using jQuery

Currently, I am working on fetching a multidimensional JSON array using JQUERY. I am facing challenges in extracting specific items from the array and inserting them into the HTML. I need assistance in navigating through the array to retrieve these elemen ...

javascriptjqueryjson

What steps should be followed to set up Selenium WebDriver to accept command line options using Node.js?

I'm currently working with Selenium WebDriver through Node.js and I have a set of resources that I'm not sure how to interpret for my specific objective (here and here). At the moment, all my tests are running successfully as intended but now I w ...

javascriptnode.jsseleniumselenium-webdrivercommand-line

utilizing an arrow function in the same manner as a traditional function

I am a fan of the new arrow ()=>{} syntax and would love to use it wherever possible. I understand that arrow functions point to the outer this context. Is there a way to modify an arrow function so that "this" points to its inner scope? For example, h ...

javascriptangularjsecmascript-6

Using Javascript to dynamically populate dropdown options based on radio button selection

I am in the process of developing a basic form that allows users to input the frequency of a specific report. Initially, users were only able to enter days of the week. However, due to changes in demand for certain reports, options such as workday and day ...

javascriptjquery

Switching from the global import module pattern to ES6 modules

In recent years, my approach to JavaScript development has involved using the global import method. Typically, I work with a set of utility functions packaged and passed to a separate site module containing individual functions for each web functionality: ...

javascriptnpmecmascript-6es6-modules

Adjust puppeteer window dimensions when running in non-headless mode (not viewport)

Is there a way to adjust the browser window size to match the viewport size in Chrome(ium)? When only setting the viewport, the browser can look awkward if it is not running headfully and I want to visually monitor what's happening within the browser ...

javascriptgoogle-chrometypescripttestingpuppeteer

Managing Emitted Events in Vue.js Components within Components: A Guide

I have created a Toolbar Item component as follows: <template> <div class="flex cursor-pointer items-center justify-center rounded-full border-2 border-gray-300 p-1 shadow-sm transition-all duration-300 hover:scale-110 hover:bg-black ho ...

javascriptvue.js

``I am experiencing slow loading times with Google Maps JS when using

When accessing Google Maps on Safari, zooming in can be frustratingly slow on both Windows and Mac. The experience feels glitchy, with the zoom starting, freezing, then finally finishing. In comparison, Chrome provides a much smoother and faster zooming ex ...

javascriptiosgoogle-mapssafari

Extension for Chrome that enhances YouTube video playback experience

I'm struggling to figure out why this isn't functioning. I've reviewed the Google extension dev docs and examined some sample code. Checked various Stack Overflow questions and answers, but haven't received any helpful feedback or res ...

javascripthtmlgoogle-chrome-extension

Navbar optimization by eliminating unnecessary whitespace at the end

I'm working on a navigation bar that has four links. I need to get rid of the extra space to the left of "Projects" and to the right of "Contact." It seems like this spacing is part of the unordered list structure, rather than padding or margin. Chec ...

cssnavbarnav

Influencing location preferences in Google's place search

I'm currently implementing a Google Places search feature and I need to enable "Location Biasing" for the GCC countries (UAE, Saudi Arabia, Oman, Kuwait & Bahrain). My goal is to achieve the functionality described in the following link: https://deve ...

javascriptgoogle-mapsgoogle-maps-api-3geolocation

Issue with opacity transitions in Chrome on React application

I am currently developing a pomodoro clock using React. My goal is to have the message text (e.g. "Set a time", "Focus," etc.) and the play/reset button fade out and in when the play/reset button is pressed. So, when the play button is clicked, "Set a time ...

htmlcssreactjs

I require the flexbox children to be arranged in a regular manner

How can we set flexbox children to default layout behaviors? Let's make them behave like the disobedient kids they are. .wrapper { This should be a row } .column { Make all heights equal display: flex; } .child { Back to regular display...wit ...

cssflexboxchildren

Struggling with overlaying Bootstrap modals on top of each other

This idea is inspired by the topic Multiple modals overlay I am working on developing a folder modal that allows users to either 1) open an existing file or 2) create a new file within each folder modal. To see how it functions, please run the code below ...

javascripthtmljquerycssbootstrap-5