Need a guide to identify HTML elements with a particular attribute?

I attempted to find this information online, but I wasn't successful.

Suppose I am interested in knowing all the HTML elements that contain a "background" attribute. I'm aware that some web browsers may not support certain elements.

Off the top of my head, 

<body>, <table>, <etc>
are just a few examples of elements that allow for this attribute. However, I am aware that there are more elements out there that I haven't listed. 

<body background="url">

Is there a reliable resource available that provides a comprehensive list of elements associated with each specific attribute? I understand that the background attribute in the format shown above is now considered obsolete, but this serves as an example for clarification.

htmlcssdom

Answer №1

If you're in search of a way to target elements using CSS attribute selectors, you might find this resource helpful:

https://www.w3schools.com/cssref/sel_attribute.asp

For your specific case, you can grab all elements with a background attribute using the following query:

document.querySelectorAll('[background]');

Answer №2

If you're curious about this concept, you can easily try it out in your own web browser. When an attribute directly corresponds to a CSS property, setting the attribute will also set the property automatically!

For instance, using the background attribute will actually affect the background-image, which you can test by...

<div></div>
<table><tr><td></td></tr></table>
<script>
  var result = 'Results:<br>';
  var nodes = document.body.children;
  for (var i = 0; i < nodes.length; ++i) {
    var node = nodes[i];
    node.setAttribute('background', 'bg.png');
    var bgimage = window.getComputedStyle(node).getPropertyValue('background-image');
    if (bgimage!='none')
      result += node.nodeName+' has '+bgimage+'<br>';
  }
  nodes[0].innerHTML = result;
</script>

This script examines the children of the body element, including div, table, and script. It assigns a background attribute to each and then identifies which elements now have actual background-image styles applied.

The results show that table supports this feature, while div and script do not, which is somewhat expected.

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

Immutable value of a fixed attribute and the format of the element's date

I have a couple of inquiries regarding the internet TV site I am currently working on. First, I want the main subscription element to have an attribute called (ServerIP) with a fixed value that cannot be changed. However, the code I tried did not work as e ...

htmlxmlxsltwebxsd

If using conditional SCSS, consider overriding the variables

When working with React state, I am passing a list and calling the component where needed. comments: { elementLabel: "Comments", elementType: 'textarea', className: "form-control", ...

javascriptcssreactjssassbootstrap-4

I must design a unique layout for my website

I am creating a webpage with various shapes and elements. However, I am facing a challenge with creating a shape that is commonly used. In platforms like Khan Academy, there is simulated programming where shapes can be easily created with a simple command ...

javascripthtml

Utilize jQuery to extract the content, rearrange the content, and then encapsulate it within fresh

I attempted all day to rearrange this menu the way I want, but since I am new to jQuery, I'm facing some challenges. Here is what I am currently trying to achieve: Inside the last td.top of this menu, there are 3 ul.sub li items. I aim to extract ...

javascriptjqueryhtmlcss

Tutorial on Removing and Re-Adding HTML Elements

Currently, I am utilizing Jquery to temporarily remove an element from the DOM. This specific element consists of an HTML5 video element. However, upon re-adding this element back into the DOM, the video is unable to play and the element appears as blank o ...

javascriptjqueryhtmldomhtml5-video

What is the best way to display the user login in the center of a page with all necessary controls

Challenge How can the user login be displayed in the center of the page? Additional Information The current layout displays user login data on the left-hand side. I am looking to have the user login data centralized on the page, which includes labels f ...

csshtmlasp.net-mvc-4bootstrap-4bootstrap-ui

What is the method for generating an oval shape with a border-radius in CSS?

Is there a way to create an oval shape instead of a rectangle with rounded edges using CSS? Below is the code snippet I have been working with: div { position: fixed; border-radius: 25px; background: rgba(0,0,0,.5) width: 100px; height: 50px; ...

css

The expression '<xsl:value-of select="document(content)//title"/>' results in a null node response

Can someone assist me in retrieving the title of a basic HTML document in order to create a sitemap? I have been receiving an empty value every time I try. Upon inspecting the issue, it appears that the document(content) is returning document nodes. It s ...

htmlxslt

Assist with JavaScript Programming

Can someone assist me in creating functionality for the "Show Picture" button to toggle the visibility of the picture when clicked? I've been trying to achieve this using an If/Else statement for a school project but have been struggling with it. Any ...

javascriptjquerycss

Modify an element upon clicking the mouse on an image

I am looking to dynamically change the paragraph element with className="details" to an editable input field when a user clicks on the image with className="edit-icon" within the same grid container. How can I achieve this functionality ...

javascripthtmlreactjsmaterial-ui

How to switch between classes for elements and return to the original one when none of the elements is chosen

Hello there, I need some assistance. Here's the scenario: I am working with a grid of six items. My goal is to have the first item in the grid become active by default. When the user hovers over any of the remaining five items, I want the active clas ...

javascripthtmljquerycss

The min-height attribute of the tooltip functions, but the min-width attribute does

I found a helpful tooltip on this site: I customized it to work with an input element: <div class="tooltip"> <input type="text" placeholder="Name" name="dp_name"> <span>Full name asd as dasd as dasd</span> </div> ...

htmlcss

Choosing an item prior to a break in the text line

I designed a navigation bar with the following CSS structure nav { text-align: center; } nav > ul { list-style: none; padding: 0; margin: 8px auto; } nav > ul > li { display: inline- ...

htmlcss

Unable to achieve full width for a div within a scrollable container

Currently, I am in the process of constructing a new website using Gatsby.js. However, I have encountered a minor issue with some CSS related to code blocks. Since CSS is not my strong suit, I have been unable to resolve it thus far. Below is a runnable sn ...

htmlcss

Spacing Problem with Title Tooltips

After using the padEnd method to ensure equal spacing for the string and binding in the title, I noticed that the console displayed the string perfectly aligned with spaces, but the binded title appeared different. Is it possible for the title to support s ...

javascripthtmlangulartypescript

Exploring the benefits of utilizing Scoped CSS for individual components within Next.js version 13

Switching from a Vue.js background to starting with Next.js, I want to scope my CSS for each component such as Navbar instead of using it inside Globas.css. Is there a way to achieve this? I am also utilizing the Tailwind CSS library. I attempted creatin ...

cssreactjsnext.jsvuejs3next.js13

HTML: Determine the Precise Location of a Div Element That is Centered

Imagine I have this image: Is there a way for me to determine the x/y or left/top properties of my canvas if it is centered using the following CSS: #canvas-container { width: 100px; height:100px; margin: 0px auto; } Note ...

javascriptjquerycsshtml

There is an error in the regular expression that has not been caught: the forward slash is

I have a TableCell with the following structure: <asp:TableCell CssClass="plusTd button" ID="plusCell"> </asp:TableCell> Then, I decided to add a property to it like this: plusCell.Attributes.Add("onclick", "/Add.aspx ...

c#htmlasp.net.net

What are effective ways to design a dialogue or conversation with CSS styling?

Looking to create a design similar to this one, but unsure of the terminology: https://i.sstatic.net/4QRcw.png I am open to different approaches for the layout, but possibly something along these lines: https://codepen.io/nachocab/pen/LaBwzw .containe ...

css

Attempting to showcase JSON response within an HTML page using JavaScript

Can anyone help me troubleshoot my code for displaying JSON data on a web page? Here's what I have so far: <button type="submit" onclick="javascript:send()">call</button> <div id="div"></div> <script type="text/javascript ...

javascripthtml