Ways to select the element based on a specific CSS property value in the inline style

As a novice in the world of Javascript, I am currently attempting to select an element within an array of images where the opacity is set to 1. Could someone please guide me on how to achieve this? I've tried using hasAttribute, but I'm unsure how to compare it with ==1 as it's yielding unexpected results.

<ul id="fullscreenImagesList">
    <li><span class="fullscrnImgs"></span></li>
    <li><span class="fullscrnImgs" style="opacity: 1;"></span></li>
    <li><span class="fullscrnImgs"></span></li>
    <li><span class="fullscrnImgs"></span></li>
    <li><span class="fullscrnImgs"></span></li>
</ul>

Now let's take a look at the JavaScript snippet:

var bigImages = [].slice.call(document.getElementsByClassName("fullscrnImgs"));
for (var i = 0; i < bigImages.length; i++) {
    var opac = bigImages[i].getAttribute("opacity");
    console.log(opac);
}
javascriptcss

Answer №1

If you are specifically searching for the opacity property within the inline style attribute of an element, as demonstrated in your example, then

bigImages[i].style.opacity

is the solution.

The complete code snippet is:

var bigImages = document.getElementsByClassName("fullscrnImgs");
for (var i = 0; i < bigImages.length; i++) {
    var opac = bigImages[i].style.opacity;
    console.log(opac);    
}

However, keep in mind that opacity is a CSS property that can be defined in various ways; aside from being part of the inline style attribute, it can also be set through the CSS cascade. The most reliable method to determine the actual opacity applied to an element is by using getComputedStyle:

var opac = window.ComputedStyle(bigImages[i]).opacity;

Answer №2

using jQuery:

let visibleImage = $('img[opacity="1"]');

Answer №3

When working with an element, it is recommended to utilize the getAttribute method

var transparency = imageElement.getAttribute("transparency");

[UPDATE] Make sure to verify if the variable has been defined. You can implement something like this

if (typeof transparency === 'undefined') {
    //transparency is defined
}

[UPDATE 2] If you are interested in the css style, consider using window.getComputedStyle()

var styling = window.getComputedStyle(imageElement);
var transparency = styling.getPropertyValue("opacity");

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

Tips on transferring a Rails variable to Ajax

Struggling to integrate a progress bar (Javascript) into my Ruby on Rails application, I am facing difficulties in passing values from the controller to JS for updating the bar. In my initial attempt, I used a basic global variable ($count), but it remain ...

javascriptjqueryruby-on-railsrubyajax

Checkbox Event Restricts Access to a Single Class Variable

As a beginner in AngularJS (just diving in this week), I've encountered an issue with a checkbox input connected to an ng-change event. <input type="checkbox" ng-model="vm.hasCondoKey" ng-change="vm.onKeyCheckboxChange()" /> The ng-change even ...

javascriptangularjstypescriptevents

How come I don't have to specify the relative path in my HTML file to include a JavaScript file when using Express JS?

I am currently in the process of building my very first project from scratch. As I was setting everything up, I ran into an issue with using relative paths to reference my javascript file in my index.html file. Strangely enough, simply referencing the scri ...

javascripthtmlnode.jsexpress

Can responsive images be utilized with a DIV's background-image property?

For my website, I want to incorporate a variety of Thumbnails that are retrieved from a database and displayed in different sizes within a Masonry grid. Typically, I would use background-image:url(image.jpg); background-size: 100% 100%:, but I am aiming t ...

htmlcssimageresponsive-design

Navigating to a different page using the browser address bar causes the context to be reset

Upon receiving the user's data from the API on the login page, it is set in the user context. Subsequently, upon redirection to the AdminPanelApp, the data within the user context is displayed accurately. However, if I am in the AdminPanelApp and navi ...

javascriptreactjs

The dynamic route parameter does not currently have compatibility with languages that utilize Unicode characters apart from the English

NextJS 13 (beta) Official Documentation provides information on dynamic route parameters in this link. Clarification: app/shop/[slug]/page.js To retrieve the slug, use params.slug. Example: app/shop/this-is-shop/page.js In this case, params.slug will o ...

javascriptnode.jsreactjsnext.js

"In Typescript, receiving the error message "Attempting to call an expression that is not callable" can be resolved

I am in the process of creating a function that matches React's useState signature: declare function useState<S>( initialState: S | (() => S), ): [S, React.Dispatch<React.SetStateAction<S>>]; Below is an excerpt from the functi ...

javascripttypescript

A guide to swapping text in a jQuery DOM component

In order to construct HTML from a jQuery ajax response, I prefer not to nest unsightly strings in javascript and avoid using templating scripts like mustache. Instead, I decided to utilize a template HTML with display: none as shown below: <div id="mes ...

javascriptjquerystringreplace

What is the best method for playing raw audio wav files directly in a web browser?

I'm currently attempting to play wav raw data in the browser that is being transmitted from a Node.js server via socket.io. The main goal is to play the receiving data as quickly as possible without waiting for all the data to be received. I initially ...

javascriptnode.jssocket.ioblobweb-audio-api

Exploring the features of React.js version 16

I'm confused about what {...props} does. I know it makes passing props easier, but what happens if there are no props to begin with? Take this example: const input = (props) => { let inputElement = null; switch(props.inputtype) { ...

javascriptreactjsecmascript-6

Clicking on an absolute HTML element will instantly scroll back to the top of the page

Working on a website, I've designed a custom menu that is hidden with 0 opacity and z-index -1. When a button is clicked, the menu will appear on the screen. You can visit to see the site in action. The issue I'm facing is that every time I cl ...

javascriptjqueryhtmlcss

The properties of a JSON object are not explicitly defined

When I make an AJAX call, I receive a JSON object and log it using this code: console.log(response); This is the response that gets logged in the console: {"filename":"new.jpg","orientation":"vertical"} However, when I try to access the orientation pro ...

phpjavascriptajaxjsonundefined

Expanding divs automatically depending on the content they contain

Currently, I have been developing a template for a database-driven page that is supposed to contain four divs for content arranged like this: ----- ----- | 1 | | 2 | ----- ----- ----- ----- | 3 | | 4 | ----- ----- The information in each box will always ...

jquerycsshtml

Excessive geolocation position responses in Angular 5

I am trying to implement an Angular 5 component that will continuously fetch my current location every 3 seconds if it has changed. Here is a snippet of my code: export class WorkComponent implements OnInit { constructor(private userService: UserService ...

javascriptangulartypescriptgeolocationangular5

Guide to making a vertical clickable separator/line using bootstrap

Seeking advice on creating a layout where the left side consists of a sidebar menu occupying 24% and the right side contains main content taking up 75%, with a clickable vertical divider at 1% between them. When this line is clicked, the left part will hid ...

jquerycsshtmltwitter-bootstrap

Implementing precise search functionality in a table with jquery datatables

Hey there, I'm attempting to implement an exact search feature in jQuery datatables. In my table, I have a column called "status" with values of either "paid" or "unpaid". Currently, when I type "unpaid", it correctly displays only the unpaid record ...

javascriptjqueryjquery-pluginsdatatables

Transferring information from the main function to getServerSideProps

I've been facing challenges while trying to pass data from a function component to the getServerSideProps method in Next.js. As a beginner in learning Next.js, I am struggling to understand this concept. My approach involves using context from _app, b ...

javascriptsessionnext.js

Sequelize cannot locate the specified column in the database

click here for image description I encountered an issue where a column was not recognized after migrating with sequelize-cli. Even though all the columns are defined in the migration file, this error keeps appearing. Additionally, when trying to create a ...

javascriptpostgresqlexpresssequelize.js

What is the best way to implement jQuery on my website?

Instead of copying all the example code here, you can check out the jQuery demo page: Demo Page I would like to integrate the Latest News example with scrolling text in red from the demo page into my website. The demo page also provides links to the sour ...

javascriptjqueryhtmlcss

Failed to parse module: Encountered an unexpected token while using babel-loader with BABEL_ENV set to development

I recently encountered an issue with my React project using webpack when I added the @superset-ui/embedded-sdk library via yarn. While the production build runs smoothly, the development build fails to compile. Since I am not very familiar with webpack, it ...

javascriptreactjsnode.jswebpackbabel-loader