Can a div's style be modified without an id or class attribute using JavaScript or jQuery?

Question

Can a div's style be modified without an id or class attribute using JavaScript or jQuery?

Is it possible to change the style of a div that doesn't have an id or class assigned to it? I need some assistance with this.

Here is the div that needs styling:

<div style="display:inline-block">

I would like the end result to look something like this:

$('#ID/.Class').css({'display': 'block'});

The desired outcome is:

<div style="display:block">

If you are able to help me, it would be greatly appreciated!
If modifying the div using JQuery is not feasible, I am open to alternative solutions using Javascript. Please provide the complete javascript code so I can easily implement it into my project. Thank you!

javascript jquery html css

Answer 1

Answer №1

One easy way to achieve this in jQuery is by selecting the div's style attribute and checking if it contains the value inline-block using the * selector. To target only one of these divs, you can also use first() followed by css() to update the style.

$("div[style*='inline-block']").first().css('display', 'block');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="display: inline-block;">Example div</div>

The approach in native JavaScript is very similar, except you would use querySelector():

document.querySelector("div[style*='inline-block']").style.display = 'block';

<div style="display: inline-block;">Example div</div>

Answer 2

One easy way to achieve this in jQuery is by selecting the div's style attribute and checking if it contains the value inline-block using the * selector. To target only one of these divs, you can also use first() followed by css() to update the style.

$("div[style*='inline-block']").first().css('display', 'block');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div style="display: inline-block;">Example div</div>

The approach in native JavaScript is very similar, except you would use querySelector():

document.querySelector("div[style*='inline-block']").style.display = 'block';

<div style="display: inline-block;">Example div</div>

Answer 3

Answer №2

Check out this handy Jquery code snippet that filters for div tags with inline styles set to display:inline-block and then changes them to display:block. If you want to see the results, just inspect the element. Give it a try!

$("div").filter(function(){
return ($(this).css('display') == 'inline-block');
}).css("display","block");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-block">Text</div>

Answer 4

Check out this handy Jquery code snippet that filters for div tags with inline styles set to display:inline-block and then changes them to display:block. If you want to see the results, just inspect the element. Give it a try!

$("div").filter(function(){
return ($(this).css('display') == 'inline-block');
}).css("display","block");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-block">Text</div>

Can a div's style be modified without an id or class attribute using JavaScript or jQuery?

Answer №1

Answer №2

Similar questions

What is the best way to record data while initiating a process in node.js?

What is the best way to dynamically create list items for an unordered list using ASP.NET?

How about we display the Extents Algorithm?

Setting up a chat feature in a Laravel application: A step-by-step guide

Instructions for using jQuery to replace the final <a> tag within a specific section

PHP Temp File Not Found After AJAX File Upload

Using AngularJS in conjunction with other scripts

What could be causing my Mocha reporter to duplicate test reports?

Calling a function within another function

Is it acceptable for Single Page Web Apps to have multiple requests at startup?

There are two separate CSS files linked to the same page, but the browser is only rendering the styles from

Maintaining the style of `li` elements within a `ul` list while ensuring they all

Deactivate button using Javascript

Utilize jQuery to access the text content of the desired element

Connect to content on the current page

Is there a way to stop vue-panZoom from functioning temporarily?

Struggling to make React respond to button clicks without resorting to using addEventListener

Links are functional in browsers, but seem to be unresponsive on iPad devices

Learn the process of utilizing AJAX to upload files in CodeIgniter

Dealing with null route parameters for Express applications