From the course: Learning Chrome Web Developer Tools
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Modify the DOM - Chrome Tutorial
From the course: Learning Chrome Web Developer Tools
Modify the DOM
- [Instructor] On the Binaryville main page, I have this big graphic that's actually composed of two separate images that move relative to each other when I resize. I want to see what the design would look like if I took out this background image and just left the robots. The Elements Panel lets me change the code on the fly to try out changes to the HTML or CSS, so I can see what that would look like and how it would perform in the browser window. I could right-click the image and click Inspect in the menu, but I'm going to use the Inspect in Element button instead. So, I'll click that, and then when my pointer is over that image, it's clear that just the image is highlighted. And when I click it, the image element that corresponds to it in the DOM is highlighted in blue down here in the Elements Panel. And with that element selected, I'll press the Delete button, and it's gone. And notice that it's gone both from the DOM…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.