我应该使用Javascript，CSS或隐藏控件呈现的图像的内容吗？

Question

I would like to hide the background image of the ReportView control which is toolbar_bk.png By saying hide actually i would like to set it to none.

So how could i easily do it? Server side, CSS, Javascript or even better JQUERY? I am totally lost with this one.

Here is the rendered part

<div id="ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_ReportViewer1_ctl05" 
  style="font-family:Verdana;font-size:8pt;border-bottom:1px #CCCCCC Solid;
  background-color:#F7F7F7;
  background-image:url(/domain-name.com/Reserved.ReportViewerWebControl.axd?
  OpType=BackImage&Version=10.0.40219.329&
  Color=%23F7F7F7&Name=Microsoft.Reporting.WebForms.Icons.toolbar_bk.png);">

Answer 1

Please note that it's always CSS what hides your element or shows your background etc. You just can put it inline, into an external file or create it dynamically via a script language (ie JavaScript), eventually by use of a JavaScript library as jQuery.

To your question: Just don't create the inline style serverside, and everything is well.

Answer 2

I'm not sure this is what you want. Here's an answer nevertheless..

Wrap them with their own div. Let's give that div a class of "wrapper". on the css side paste this:

.wrapper * { background-image: none; }

Answer 3

With jQuery, you would simply do this:

$('#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_ReportViewer1_ctl05').css('background-image', 'none');

With just plain javascript:

document.getElementById('ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_ReportViewer1_ctl05').style.backgroundImage = 'none';

With css in the page or in external style sheet:

#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_ReportViewer1_ctl05 { background-image:none !important}

Answer 4

1. Best option -- Configure the server control to not set a background image.
2. If #1 is not possible, you could write JavaScript to manipulate the HTML after it loads.

Here's a jQuery example if you need to use option 2:

$('[id~="ReportViewer1"]').css('background-image', 'none');

Answer 5

Use jquery addClass() function as follows

<style>
            .report
            {
                background-color: #D6E3F3;
                /* background-image: url("/Reserved.ReportViewerWebControl.axd?OpType=BackImage&Version=10.0.30319.1&Color=%23ECE9D8&Name=Microsoft.Reporting.WebForms.Icons.toolbar_bk.png");*/
                border-bottom: 1px solid #CCCCCC;
                font-family: Verdana;
                font-size: 8pt;
            }
            </style>


<script>
    $(document).ready(function () {
        $('#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_ReportViewer1_ctl05').removeAttr('style');
        $('#ctl00_ctl00_ContentPlaceHolder1_ContentPlaceHolder1_ReportViewer1_ctl05').addClass('report');
    });
</script>