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.