We Keep Coding

How to remove all changes on styles that have been made with js

hope you are fine
I just wanted to know if there is a method to reset all the styles that have been altered with js
which appear here in the photo
and Thanks.

Maybe you can try to unset all inline CSS? Try to use
document.querySelector("#elementid").style = "";
Because CSS added with JS is just inline style. These from external CSS sheets or tags would be preserved.
Also maybe think about adding a class to your element with JS using
element.classList.add("class");
and then removing when you need it using
element.classList.remove("class");
instead of adding new inline styles with
document.querySelector("#elementid").style = "some styles";

Customizing external embed widget

I've been trying to customize an embedded widget from Zendesk on my website. Since they don't give any option to customize the look of its form, I would like to enforce my css rules.
I added this piece of code from Zendesk to have their form on my page.
<script type="text/javascript" src="https://leads-capturer.futuresimple.com/embed.js?token=ca98908sdgfgds9834234jlkjsdb">
This script places a form within an <iframe> and all nodes inside this <iframe> cannot be customized/changed.
I tried JS to set an inline style to form elements inside the <iframe>. Tried create a new stylesheet to override their original stylesheet but nothing seems to work.
Even something as simple as this code below, fails (#iframe-main-container is a child from <iframe>):
<script>
let p = document.querySelector('#iframe-main-container');
p.style.background = 'red';
</script>
If I change the code above and target <iframe>, it works.
My first question would be, is it possible to override an existing CSS rule from an embedded widget?
If this is possible, am I doing something wrong to change its looks?

Give this a try.
<script>
let iframe = document.getElementsByTagName("iframe");
let p = iframe[0].contentWindow.document.getElementById('#iframe-main-container');
p.style.background = 'red';
</script>

Add HTML code in .html files with javascript

I'm developing a website with bootstrap.
If I want to modify the navbar, I don't want to go to any html files and make changes.
So would like to use javascript to "inject" the html code into the actual html file but I don't know how to do it.
This is what I tried.
document.write("<p>html code here</p>")
It, however, doesn't work. What the most conveniente and simple solution could be?

You can try something like this example below:
let newElement = document.createElement('div');
newElement.className = 'new-element';
This will create a div - assign it to the variable named 'newElement' and creating a class associated with that element named "new-element".

Is there a way to not load html until JavaScript loads?

I want to make sure that all JavaScript happens before the page is loaded. I am changing some innerhtml, but don't want the original innerhtml to show.
Currently, when my page loads "Books" is displayed for a brief moment, then finally when the script is read, it gets replaced. How do I prevent it from displaying the initial text?
FYI the script exists inside a php file.
<?php
?>
<script>
function changeme(){
var myvar = "test-string-is-long-to-notice-the-changed-text";
var spans = document.getElementsByTagName("span");
for(var i=0;i<spans.length; i++) {
if(spans[i].textContent.trim().toLowerCase()==="books") { //is this the "Welcome" span?
spans[i].innerHTML = myvar; //change to new value
break; //hop out of the loop, we're done
}
}
}
window.onload = function() {
changeme();
};
</script>

It is not a good idea to load JS before HTML, because you can not change the HTML elements before loading it using js.
Solution 1: Initially, keep the html tags empty that you do not want to show, because you want to show new data from JS.
Solution 2: Initially, keep the styles for those elements "display: none" and when you add the data using Js in element. Update the style to display: 'block' or any other you want, eg spans[i].style.display = 'block';.

You cant apply JS to a html document that doesnt yet exist. Your html is always loaded first, then your JS is applied. What you could be seeing here is the html is loaded and the JS is taking like what--a second to load and make the change? I recommend figuring out a more efficient way to implement the JS you need. You could just be seeing JS latency. You could use a more efficient implementation plus some CSS to fix it. I could be wrong here but it just doesn't make sense to apply JS to html went the html isnt even there yet.
How would I apply any JS to that if I'm trying to do it before the browser has even parsed and rendered my html?
Also remember that PHP is always "loaded" first, then html, then JS

CSS #media in javascript or jquery

I need a little help. I creates a nav menu in html an css (with specific media query), and the javascript (jquery) I wrote code that looks like this:
var x = $('#nav-menu > ul').children().length;
alert(x);
$('#nav-menu > ul li').css(width, x);
But the last line in the code I want change in the specific media query.
Is that possible?
Thanks in advance.

Using .css creates an inline style and doesn't actually change the CSS file that contains the rules being applied. Instead, create a class and add a rule in the media query for the properties that you want to change, and use .addClass and removeClass in your JavaScript as needed.
Edit: just saw that bergi's comment is basically the same idea. Hope this helps understand why.