html - how to hide the google +1 button?

Question

I have a google +1 button in a div which is supposed to be initially hidden and should change visibility on a click event. Everything else in the div works fine but for some reason the button won't inherit the div rules and it stays permanently visible:

<div id="sharethisdish"> 
    ...
        <g:plusone size="small" count="false" ></g:plusone>
</div>

I've tried giving the button its own styling in the html as well as giving it an id and defining the styling in my css page but it doesn't seem to follow any rules. Does anyone know how to change its visibility?

Answer 1

If the hiding/showing is being done onClick then chances are that it is applying the style inline. Which means the inline style will override the one set in your css file.

You could use !important and I believe that should override the style being applied on click.

Answer 2

这应该可以解决您的问题：

HTML：

<div id="sharethisdish">
<script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall" callback="g_click_function"></g:plusone>

JS：

var d = document.getElementById("sharethisdish");
d.style.display = "none";

现在制作 onclick 事件，这将使 d.style.display = "inline";