What's the best way to alter the style of an element within a <div /> using JavaScript?

Looking at my index.html, I see the following code:

<div id="mydiv">
  Text inside div
  <h1>
    Header inside div
  </h1>
</div>

<h1>
  Header outside div
</h1>

My style.css file is defined like this:

#mydiv h1 {
  color: blue;
}

If I want to change the color of "Text inside div" using JavaScript, I can use the following script:

document.getElementById("mydiv").style.color = "red";

However, I am now faced with the challenge of changing the color of "Header inside div" using only JavaScript without making alterations to the HTML or CSS files or affecting the h1 outside the div. How can this be achieved?

Answer №1

When utilizing the document.querySelector method, it becomes possible to target the h1 element within the #mydiv selector.

document.getElementById("mydiv").style.color = "red";

document.querySelector("#mydiv h1").style.color = "yellow";
#mydiv h1 {
  color: blue;
}
<div id="mydiv">
  Text inside div
  <h1>
    Header inside div
  </h1>
</div>

<h1>
  Header outside div
</h1>

Answer №2

If you want to change the color of a specific element, try this method:

document.querySelector('#mydiv h1').style.color = "green";

This code will target the h1 tag within the div with the id of "mydiv".

The document.querySelector function is incredibly handy for these types of manipulations. For more information on how it works, take a look at the Document.querySelector() documentation.

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

Link is causing CSS style to malfunction

I am facing an issue with the styling of my JSP page. When I link the external style sheet using this code: <link rel="stylesheet" type="text/css" href="/doctor/css/form_input.css" /> it seems to have no effect on the appearance of my page. However ...

The Bootstrap menu is having trouble collapsing properly

We're currently in the process of constructing a website using bootstrap, but we've encountered an issue with the menu bar. Upon visiting , you'll notice that the top menu functions properly and collapses perfectly when viewed on mobile dev ...

Continuously encountering a Login Required message while attempting to upload a file on Google Drive

I am currently developing a chrome extension that is designed to intercept specific downloads, like .doc and .docx files, and automatically upload them to a designated folder in Google Drive. Below is the manifest for this extension: { // Manifest det ...

Issue with grid breakpoints for medium-sized columns and grid rows not functioning as expected

I'm working on building a grid layout from scratch in Vue.js and have created my own component for it. In my gridCol.vue component, I have defined several props that are passed in App.vue. I'm struggling to set up breakpoints for different screen ...

Is there a way for me to determine if a user has engaged with a form?

I'm surprised by how difficult it was to find information on this topic through Google. Currently, my struggle lies in wanting my form fields to change color based on validity only after the user has interacted with the form. I don't want invali ...

What is the best way to retrieve the border-color inline style using jQuery?

I have a HTML tag like this. <span id="createOrderFormId:accountNo" style="border-color: red;"><</span> To retrieve the style value for the border-color property, I tried using the following jQuery code: $( document ).ready(function() { ...

Steps to shorten HTML content while maintaining consistent column width

Is there a way to ensure that the fixed column width is maintained even with long strings? I am trying to display a report in a jsp by having headers in one table and content in another table, both with columns set to the same width. However, some of the ...

The custom pagination feature in Addsearch UI always default to displaying the first page of search

I am currently using addsearch-ui version 0.7.11 for my project. I have been attempting to integrate a customized pagination function based on this example template. However, I have encountered an issue where the arrow buttons always navigate to the first ...

What steps can I take to stop text from disappearing when the screen size decreases and the span is used?

I'm currently using Bootstrap 5 to create a form. On a computer screen, my file input element looks like this: https://i.sstatic.net/fX6Kx.png However, on mobile devices, it appears like this: https://i.sstatic.net/ilUZ9.png Below is the code sni ...

Tips on resetting v-model after changing select options

In my project, I have implemented a cascading select feature where the options in the second dropdown are dependent on the value selected in the first dropdown. This is achieved by using a computed property based on the first select to populate the options ...

What causes the inconsistency in time intervals in the loop?

My goal was to create a simple slider that loops through 3 images, with each image staying visible for 3 seconds before fading out and the next one fading in. However, I encountered an issue: The first image can stay for 3 seconds, but once the loop star ...

Is there a way to ensure that a "loop once" animated GIF background will replay on each page refresh or load?

I currently have an animated GIF file set as the background image for my div, which was specifically configured in Photoshop to loop only once. Therefore, it only plays on the initial page load. Is there a way to reset the background image upon page refre ...

Adjust the sorting key for the displayed mapped array in a React component

Seeking client-side sorting functionality that allows users to sort by different integer keys. Currently implementing a sort function right before the map function: .sort(function(a, b) { return b.sortKey - a.sortKey; } When a button is pr ...

Can someone guide me on running a JavaScript code in Python with the help of Selenium?

My attempt to extract information using Selenium involved the following code: from selenium import webdriver # $ pip install selenium from selenium.webdriver.chrome.options import Options path = 'C:/Users/Жираслан/Downloads/chromedriver_win3 ...

Enhance your website navigation with Bootstrap Scrolling Nav: maintain consistent section heights and highlight the active

Can you help me with an issue I'm having when clicking on the <a> link in the navigation? The anchor point seems to be misplaced as the section headline (<h2>) is not visible. Is there a way to highlight the <a> links, perhaps by add ...

Trouble arises when implementing personalized buttons on the Slick JS slider

Are you struggling to customize buttons for your Slick Slider JS? I am facing a similar issue with applying my own button styles to the slider. I am interested in using arrow icons instead of the default buttons. Here is the HTML code snippet: <secti ...

What are the steps to switch to a root page after a successful sign-in with Ember-Auth?

After successfully implementing Ember-Auth using a pure token based approach, I am facing a challenge in redirecting users to the root of my app once they sign in. Although I know about actionRedirectable (refer to for details), since I am using a pure t ...

Using div tags as interactive buttons, as well as incorporating dynamic functionality such as delete and report spam options

In this practice test scenario, the objective is to log in to Gmail, click on all checkboxes in a dynamic web table, and delete the mails. Below is the code that I have created for this task. The issue arises when checking if the delete button is visible. ...

How do I go about setting up a carousel that showcases particular posts within a Jekyll website?

My goal is to set up a carousel that features specific posts, creating a visually appealing layout. Since the jekyll theme I'm using comes equipped with Bootstrap 4, I decided to utilize a pre-existing carousel code from Bootstrap. To achieve this, ...

Faux CSS, every other moment appears to be unsuccessful

My HTML code looks like this: <div class="container"> <div class="foo">Foo!</div> <!-- if this is red... --> <div class="bar">Bar!</div> </div> <div class="container"> <div class="foo">Foo! ...