如何在单击链接时更改内联css样式？

Question

i have a form hidden with inline style="display: none;"

how can i dinamicaly change this style to style="display: inline;" when a link on the page is clicked?

Answer 1

Prety simple

<a href="#" onclick="document.getElementById('myform').style.display = 'inline';">Click me</a>

Update

---

jQuery is a lightweight JavaScript library that can do tons of cool stuff, with writing a very less script from the developers side.

First of all, I suggest you to read " How jQuery works? ", is has everything you need to get started using the jQuery.

---

I will explain the code I wrote in the fiddle.

First of all the link & form

<a id="linktotoggle" href="#">Click Me</a>
<form id="formtotoggle"></form>

Remember the id in the link and form above. That is how we are going to select the element in the script just like what document.getElementById() does.

Lets hide the form by default

#formtotoggle { display: none; }

Now lets write the jquery

$(document).ready(function() {
// ^ This is an event, which triggers once all the document is loaded so that the manipulation is always guaranteed to run.
   $("#linktotoggle").click(function() {
   // ^ Attach a click event to our link
        $("#formtotoggle").toggle();
        // ^ select the form and toggle its display

   });
});

Hope it is enough, to get you started.

Answer 2

Bind an onclick event on the anchor, and set the form style to display:block , here's a js fiddle to help you going

http://jsfiddle.net/ZUgPv/1/

Answer 3

You'll need to find some way of selecting the form using JavaScript, first; here's a function assuming that your form has an id attribute of myform :

function showForm() {
    document.getElementById('myform').style.display = 'inline';
}

Then, just bind that function to your link's click event. A quick and dirty way is to set the link's onclick attribute to showForm(); return false showForm(); return false , but you'll probably want to do that in external JavaScript to separate your content and behaviour nicely.

Answer 4

Hey Check this JQuery.

For Show

$("#lnk").click(function () {  
$("#result").removeAttr('Style');
$("#result").attr('Style','display: inline;'); // this 
$("#result").attr('Style','display: block;'); // or this

}); 

For Hide

$("#lnk").click(function () {  
$("#result").removeAttr('Style');
$("#result").attr('Style','display: none;');
}); 

Answer 5

Here Are Some More Codez

 <a href="#" id="yourlink">yourlink</a>
    <form id="yourform" style="display:none;">form here.</form>
    <script>
    $(document).ready(function () {
        $('#yourlink').click(function () {
            $('#yourform').css('display', 'inline');
        });
    });
    </script>