Question

_createInput: function(){ 
        var self = this;

        var input = document.createElement("input");
        input.setAttribute('type', 'file');
        input.setAttribute('name', this._settings.name);
        if(this._settings.multiple) input.setAttribute('multiple', 'multiple');

        addStyles(input, {
            'position' : 'absolute',
            // in Opera only 'browse' button
            // is clickable and it is located at
            // the right side of the input
            'right' : 0,
            'margin' : 0,
            'padding' : 0,
            'fontSize' : '480px',
            // in Firefox if font-family is set to
            // 'inherit' the input doesn't work
            'fontFamily' : 'sans-serif',
            'cursor' : 'pointer'
        });            

        var div = document.createElement("div")
        div.className = 'tooltip';
        div.id = 'ajaxupload-div';
        div.title = 'Attach a picture';
        addStyles(div, {
            'display' : 'block',
            'position' : 'absolute',
            'overflow' : 'hidden',
            'margin' : 0,
            'padding' : 0,                
            'opacity' : 0,
            // Make sure browse button is in the right side
            // in Internet Explorer
            'direction' : 'ltr',
            //Max zIndex supported by Opera 9.0-9.2
            'zIndex': 2147483583
        });

        // Make sure that element opacity exists.
        // Otherwise use IE filter            
        if ( div.style.opacity !== "0") {
            if (typeof(div.filters) == 'undefined'){
                throw new Error('Opacity not supported by the browser');
            }
            div.style.filter = "alpha(opacity=0)";
        }            

        addEvent(input, 'change', function(){

            if ( ! input || input.value === ''){                
                return;                
            }

            // Get filename from input, required                
            // as some browsers have path instead of it          
            var file = fileFromPath(input.value);

            if (false === self._settings.onChange.call(self, file, getExt(file))){
                self._clearInput();                
                return;
            }

            // Submit form when value is changed
            if (self._settings.autoSubmit) {
                self.submit();
            }
        });            

        addEvent(input, 'mouseover', function(){
            addClass(self._button, self._settings.hoverClass);
        });

        addEvent(input, 'mouseout', function(){
            removeClass(self._button, self._settings.hoverClass);
            removeClass(self._button, self._settings.focusClass);

            if (input.parentNode) {
                // We use visibility instead of display to fix problem with Safari 4
                // The problem is that the value of input doesn't change if it 
                // has display none when user selects a file
                input.parentNode.style.visibility = 'hidden';
            }
        });   

        addEvent(input, 'focus', function(){
            addClass(self._button, self._settings.focusClass);
        });

        addEvent(input, 'blur', function(){
            removeClass(self._button, self._settings.focusClass);
        });

        div.appendChild(input);
        document.body.appendChild(div);

        this._input = input;
    },

从var div = document.createElement("div")开始的这个JS产生了这个div标签：

<div style="display: block; position: absolute; overflow: hidden; margin: 0pt; padding: 0pt; opacity: 0; direction: ltr; z-index: 2147483583; left: 102px; top: 323.5px; width: 102px; height: 28px; visibility: hidden;">

我看到所有其他属性的位置都发生了变化，但是我怎么能改变'visibility：hidden;“???

这让我疯了，请帮助。

Answer 1

在您的代码中找到以下部分我有明星评论，您可以在其中修改：

addStyles(div, {
        'display' : 'block', /*You cane set display none here to hide the div.*/
        'position' : 'absolute',
        'overflow' : 'hidden',
        'margin' : 0,
        'padding' : 0,                
        'opacity' : 0,
        // Make sure browse button is in the right side
        // in Internet Explorer
        'direction' : 'ltr',
        //Max zIndex supported by Opera 9.0-9.2
        'zIndex': 2147483583,
        'visibility':'hidden' /* If you don't set display none , you can set your style attribute you want to change like visibility here also */

    });

好的，要使其可见，请找到以下代码并尝试在那里设置可见性：

if (input.parentNode) {
            // We use visibility instead of display to fix problem with Safari 4
            // The problem is that the value of input doesn't change if it 
            // has display none when user selects a file
            input.parentNode.style.visibility = 'hidden'; /* try setting visibility='visible' here */
        }

如果这不起作用，那么通过检查浏览器中的div来检查是否有任何css覆盖了div的样式属性。

Answer 2

如果jQuery是一个选项，我知道有命令$('#div').css('attribute','value');

Answer 3

当您“关闭”输入

时，

可见隐藏设置

addEvent(input, 'mouseout', function(){
    removeClass(self._button, self._settings.hoverClass);
    removeClass(self._button, self._settings.focusClass);

    if (input.parentNode) {
        // We use visibility instead of display to fix problem with Safari 4
        // The problem is that the value of input doesn't change if it 
        // has display none when user selects a file
        input.parentNode.style.visibility = 'hidden';
    }
});

您可以删除该事件绑定或将语句更改为input.parentNode.style.visibility = 'visible';

如何更改此JS以使其可见？

3 个答案: