Styling in javascript

JavaScript
1

in the video im following created the html with the inline stylesheet. Now in js when i assign an element to a variable, js wont let me element.style it

2

in otherwords you wont see the style properties for any element you captured

3

exactly. I want to change the style of an element i captured, but the captured element dont show the property of style associated with it.

4

console.log(title)
let lits = document.getElementsByClassName(‘list-items’)
let title = document.querySelector(‘#main-heading’)
title.innerHTML = ‘Latest Movies’
title.st … (no style prop shows up)

5

We need to see your code. Not just a small and incomplete snippet of what you think we need to see. The best would be to put your project somewhere public and then provide a link to it.

7

console.log(title)
let lits = document.getElementsByClassName(‘list-items’)
let title = document.getElementById(‘main-heading’)
title.innerHTML = ‘Latest Movies’
title.style.color = ‘blue’

in html i use and used css style in there, but not pointing to a css doc. However, when i used getelembyid i was able to access the style attrib, but now it says… Cannot access ‘title’ before initialization. I will post below the html if it helps inlcuding the style…

Master Dom 
<style>
    #main-heading =  color: red;
    }
    .html {

        width: 100%;
        margin: 0;
    }
    body {
        margin: 0;
        background-color: rgb(30, 30, 85);
    }
    .container {
        width: 40%;
        margin: 5px auto 0;
        background-color: rgb(3, 3, 45);
        border-radius: 5%;
        border: solid white 2px;
        
    }
    h1 {
        color: white;
        text-align: center;
        padding-top: 25px;
        margin: 0;
        
    }
     ul >li {
        color: rgb(3, 3, 45);
        background-color: white;
        border: solid 1px rgb(3, 3, 45);
        text-align: center;
        list-style: none;
        width: 80%;
        padding: 15px;
        margin-left: 9px;
        
    }
    
    .lists {
        padding-bottom: 40px;
    }
    
    
</style>

Favorite Movie Franchise

  • The Matrix
  • Star Wars
  • Harry Potter
  • Lord of the Rings
<script  src="app2.js"></script>
8

not trying to be a pest, but doing js in node and vscode was no problem, but when i had to do js with html and console with changing elements, getting into somekinds of problems

9

sorry, the problem was the earlier console that was working before, but now that i moved the code, it was referring to title being used before initialization, so now it works.

let lits = document.getElementsByClassName(‘list-items’)
// let title = document.getElementById(‘main-heading’);
let title = document.querySelector(‘#main-heading’)
title.innerHTML = ‘Latest Movies’
title.style.color = ‘green’

10

the reason why this was confusing, was that i understood from different sites, ialways do research before comming here, that to use .style in js, you couldnt be using css, your html needed to only use inline styles.
but i noticed after that if you use css, you can still access the style of the elements captured, in javascript.

11

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.