Develop Reference

Is it possible to change a style of a div that doesn't have id or class using jquery or javascript?

I want to change a style of a div but the div i'm trying to change doesn't have an id or class. Can someone please help?
This is the div that I want to change:
<div style="display:inline-block">
I expect the result to be something like:
$('#ID/.Class').css({'display': 'block'});
The result I want to get is:
<div style="display:block">
If you could help me that would be great!
If it is impossible by JQuery please tell me how to do it by Javascript (If you tell me how to do it by Javascript please tell me the full javascript so that I could paste it into my code) Thanks!

This could easily be done in jQuery by targeting the div's style attribute, to see that it has the value of inline-block anywhere in it via *. If only one of these divs is needed, you also use first() followed by css() to change the style.
$("div[style*='inline-block']").first().css('display', 'block');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: inline-block;">Example div</div>
The native JS solution is almost identical, only you use querySelector():
document.querySelector("div[style*='inline-block']").style.display = 'block';
<div style="display: inline-block;">Example div</div>

Here is the Jquery version to filter the div tags that has the inline style of display:inline-block and then change its CSS to display:block. You can use Inspect element to check the output. Hope it helps.
$("div").filter(function(){
return ($(this).css('display') == 'inline-block');
}).css("display","block");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-block">Text</div>

Removing a div class with Javascript or jQuery on page load

Unsure if anybody is familiar with TypeForm. I am currently testing their forms but its very limited to options with regards to optional items such as incremental question numbers, bullet points & * for required questions.. Ive attached a screenshot of the exact item shown in the dev window that I wish to remove, how is this possible on page load using Javascript or jQuery? i.e. document.getElementsByClassName("Item");
EDIT
The way typeform is embedded is as shown in the snippet below:
Much appreciated !!
<div class="typeform-widget" data-url="https://12837r8yhe.typeform.com/to/sKcd9C" style="width: 100%; height: 500px;" > </div> <script> (function() { var qs,js,q,s,d=document, gi=d.getElementById, ce=d.createElement, gt=d.getElementsByTagName, id="typef_orm", b="https://embed.typeform.com/"; if(!gi.call(d,id)) { js=ce.call(d,"script"); js.id=id; js.src=b+"embed.js"; q=gt.call(d,"script")[0]; q.parentNode.insertBefore(js,q) } })() </script>

On page load you can do this to remove all instances of the class
$(document).ready(function(){
$('.Item').remove('Item');
});
Or just the class on divs
$(document).ready(function(){
$('div .Item').remove('Item');
});

You can remove or hide it using jquery when the page loads. But it will remove all the div items which have class .item
$(document).ready(function(){
$("div.item").remove();
console.log("removed");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Div item was here but removed when page loaded.</p>
<div class="item">1 ></div><span>Just before me</span>

$("div.item").remove() should do the trick as long as there arent other divs with the item class..
$('div.item').remove();
or
$('div.item').first().remove();

remove homepage content using javascript

I want to hide my homepage content after other link is clicked. My homepage content is into
<div class="active">
Homepage content
</div>
css class active and inactive
.active {
margin-top:230px;
font-size: 30px;
color:black;
}
.inactive
{
opacity:0;
}
I tried this script but it is not working.
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$(this).removeClass("active").addClass("inactive");
});
</script>
I upload it to an web hosting so you can see full html code here and full css file here

$(this).removeClass("active").addClass("inactive");
Is adding and removing the class from your link (which I assume has id="#link-link1)
Instead you need to give your div an id like
<div id="homepage" class="active">
Then in your JS code reference that by id:
$('#homepage').removeClass("active").addClass("inactive");
Even better would be to use jquery's hide() method or toggle() if you wanted it to come back the next time you clicked:
$('#homepage').toggle();

Add an ID to the "Homepage content" div, so we can find it using javascript.
<div class="active" id="contentArea">
Homepage content
</div>
Try placing you jQuery code inside a document read. Optionally place it right before the closing </body> tag. Add the css classes to the "Home content" div and not to the link element addressed by $(this):
$( document ).ready(function() {
var contentArea = $("#contentArea");
$("#link-link1").click(function(){
contentArea.removeClass("active").addClass("inactive");
});
});
Consider using the jQuery function toggle() for changing contents visibility.
Take a look at the manual: http://learn.jquery.com/

Just take a look at that fiddle I make a simple example for you.
In you'r web page you must use better div elments as tabs not a elements
Code:
$("#random_link").click(function(){
//$(".active").css("display","none"); //WORKS TOOO
$(".active").fadeOut();
})

Working Fiddle
HTML
<a id="link1" href="#">Hide Home Page</a>
<a id="link2" href="#">Show Home Page</a>
<br/>
<div id="home_page">
<hr/>Homepage content
<hr/>
</div>
jQuery
$('#link1').click(function () {
$('#home_page').hide();
});
$('#link2').click(function () {
$('#home_page').show();
});
Hope this helps..!!
Update using toggle() based on #Cfreak answer
Updated Fiddle

Since you are using Jquery you can use hide method that will apply to your css of that element display: none;
$('#homepage').hide();
$('#homepage').show(); //to make it visible again
hope it help

You have to change the class for the div, in your code you are change the class of the link, add an Id or class to the div, for example:
<div class="active" id="test">
Homepage content
</div>
<script src="jquery.js"></script>
<script>
$("#link-link1").click(function(){
$('#test').removeClass("active").addClass("inactive");
});
</script>

Display href link into div

I want to display the href link in the <div id="display"></div> tag so when I press anything in the menu or in my list it'll just open in the div with display as its id.
I have this menu like this done
<div class="menu">
HOME
</div>
<div id="display"></div>
and my JavaScript is like this
$('#display').html($('.menu a').html());
I don't know much about javascript, but I think the javascript code is actually wrong, I would appreciate is someone would help me.

I want to display the href
You need to fetch href property for that you can use .prop()
$('#display').html($('.menu a').prop('href'));
Demo

In case you mean retrieve the page and place it in the div:
// bind click event to all anchors within .menu
$('.menu a').click(function(e){
// fetch the page using AJAX and place the results in #display
$('#display').load(this.href);
// prevent navigating away from the page (default action of anchor)
e.preventDefault();
});
(Or maybe it's just me, but the question seems very hard to understand. :shrug:)

$('.menu a').on('click',function(e){
e.preventDefault(); //this will keep your link from loading
var href = $(e.currentTarget()).attr('href');
$('#display').html(href);
});

We can use an iframe to display the link in the <a> tag.
Here's a fiddle

Here is my version...
HTML
<div class="menu">
<a id="xxx" href="http://stackoverflow.com" onkeydown="myFunc()">HOME</a>
</div>
<div id="display"></div>
JS
$(document).ready(function() {
var data = $("a#xxx").attr("href");
$('#display').html(data);
});

Active button being highlighted for website

<!-- start menu area -->
<div id="menu" class="editable">
<div id="button1" class="repeatable">Section 1</div>
<div id="button2" class="repeatable">Section 2</div>
<div id="button3" class="repeatable">Section 3</div>
</div>
<!-- end menu area -->
I don't want to give every single button on each page it's own class. I want to use jQuery, PHP, JavaScript or whatever it takes to get it working without having to go through every single button and give it it's own class.
Also, please note I'm not using navigation bars here, I'm using only divs. Every solution I find uses navigation bars and I can't get them to work when using only divs and hyperlinks.
I want to hightlight the button, or colour it etc.. which matches the current active page.

Try something like this using jQuery:
$(document).ready(function(){
$('#menu div.repeatable a').each(function(){
if(document.URL.indexOf($(this).attr('href')) !== -1){
$(this).addClass('selected');
}
});
});
Add .selected to your CSS and style it as needed.
This will loop through the menu items and compare the url in the href attribute to the current active page url.
You can also use the divs inside #menu :
$(document).ready(function(){
$('#menu div.repeatable').each(function(){
if(document.URL.indexOf($(this).find('a').attr('href')) !== -1){
$(this).addClass('selected');
}
});
});

<div id="menu" class="editable">
<?php
$i = 0;
while($i < 10)
{
echo '<div id="button'.$i.'" class="repeatable">Section '.$i.'</div>';
$i++;
}
?>
</div>
Read up on loops

Use the jQuery selectors and .each function. I have done something similar here jQuery.attr('src') replace not working in FF.
You could use a similar script to search for every , check the href value and if it fits you, do something with the div... Like adding a style attribute inline, like style="color: #FF0000;" to make the text red or whatever you want/need.