Use JavaScript to modify the CSS by targeting elements with getElementById

Question

Use JavaScript to modify the CSS by targeting elements with getElementById

I'm struggling to figure out how to use JavaScript to access a specific CSS.

For example,

#menu { color: red; }

Can be accessed by

document.getElementById('menu').style.color = "blue";

But what if I want to access:

#menu li a { height: 10%; }

Is there a way to do this using document.getElementById()?

javascript html css getelementbyid

Answer 1

Answer №1

Vanilla JavaScript approach:

In this scenario, the usage of getElementById() is not suitable as it is specifically designed to select elements by their id attributes. Instead, you can employ getElementsByTagName() within the context of #menu:

var menu = document.getElementById('menu');
// Retrieve all <li> child elements of #menu
var listItems = menu.getElementsByTagName('li');
// Iterate through each one
for (var i=0; i<listItems.length; i++) {
  // Obtain all <a> child elements of every <li>
  var anchorTags = listItems[i].getElementsByTagName('a');
  for (var j = 0; j<anchorTags.length; j++) {
    // Update their color dynamically
    anchorTags[j].style.color = 'blue';
    // or modify other CSS properties
    anchorTags[j].style.height = '25%'; 
  }
}

Solution using jQuery:

If jQuery is accessible to you, achieving this task becomes much simpler:

$('#menu li a').css('color', 'blue');

Answer 2

Vanilla JavaScript approach:

In this scenario, the usage of getElementById() is not suitable as it is specifically designed to select elements by their id attributes. Instead, you can employ getElementsByTagName() within the context of #menu:

var menu = document.getElementById('menu');
// Retrieve all <li> child elements of #menu
var listItems = menu.getElementsByTagName('li');
// Iterate through each one
for (var i=0; i<listItems.length; i++) {
  // Obtain all <a> child elements of every <li>
  var anchorTags = listItems[i].getElementsByTagName('a');
  for (var j = 0; j<anchorTags.length; j++) {
    // Update their color dynamically
    anchorTags[j].style.color = 'blue';
    // or modify other CSS properties
    anchorTags[j].style.height = '25%'; 
  }
}

Solution using jQuery:

If jQuery is accessible to you, achieving this task becomes much simpler:

$('#menu li a').css('color', 'blue');

Answer 3

Answer №2

In order to achieve this, you would need to locate all the instances of <a> tags that meet the specified criteria.

When it comes to the .getElementById() function, its purpose is to retrieve an element based on a unique "id" attribute. If you are looking to retrieve elements in other ways, there are alternative APIs available such as: .getElementsByTagName(), .getElementsByClass(), .querySelectorAll(), and more. It's important to note that browser support can vary, and the behavior of even .getElementById() differs between Internet Explorer and other browsers.

Answer 4

In order to achieve this, you would need to locate all the instances of <a> tags that meet the specified criteria.

When it comes to the .getElementById() function, its purpose is to retrieve an element based on a unique "id" attribute. If you are looking to retrieve elements in other ways, there are alternative APIs available such as: .getElementsByTagName(), .getElementsByClass(), .querySelectorAll(), and more. It's important to note that browser support can vary, and the behavior of even .getElementById() differs between Internet Explorer and other browsers.

Use JavaScript to modify the CSS by targeting elements with getElementById

Answer №1

Vanilla JavaScript approach:

Solution using jQuery:

Answer №2

Similar questions

After populating with information, JavaScript turns into an inert void

Issues with screen scrolling becoming stuck in React and Material UI

Determining Text Color Based on Background Hue

When trying to authorize my channel, the JSON data is coming back as a blank string

Error: The function _firebase.db.collection is not defined and cannot be executed

Can you explain the difference between synchronous and asynchronous loading?

What is the most efficient way to minimize the use of if statements in an Angular component when calling a specific function?

the event listener for xmlhttprequest on load is not functioning as expected

Slice an interactive div

Using express to efficiently redirect from a search form?

Placing divs of varying heights in a circular formation with a specific radius

What could be causing the "undefined class in the imported eval() function" error

Creating dynamic pie charts with animated effects using JavaScript

Dynamically validate AngularJS forms with JSON Schema

Inability of Internet Explorer 10 to load resource files

Looking for a way to conceal the scrolling content within a div beneath a transparent header? Seeking

Change the flyout menu to activate once clicked instead of when the mouse hovers over

Unable to re-focus on div element once the input loses focus

Steps for handling errors in Node.js when the query result rowCount is 0 and throwing an error in response

Is there a way to transform a JSON document into an HTML webpage using Ruby on Rails?