jQuery (event): watch element style

скажем, есть такой элемент

Watch Me Please

, поскольку мы видим, что стиль элемента выше display: none , как я могу создать скрипт для просмотра этого элемента. когда этот стиль элемента изменяется на display: block , то будет запускаться какой-то код.

большое спасибо ... div.container {padding: 5px; граница: сплошной черный 1px; ...

Образец HTML / CSS:

    
    



div.container {
    padding: 5px;
    border: 1px solid black;
    background-color: gray;
}

div.filler {
    background-color: red;
    height: 5px;
}

input {
    display: block;
}

http://jsfiddle.net/bPEkb/3/

Вопрос

Почему поле ввода не расширяется до такой же внешней ширины, как, скажем, div.filler ? То есть, почему поле ввода не расширяется, чтобы соответствовать своему контейнеру, как другие элементы блока с width: auto; do?

Я попытался проверить "User Agent CSS" в Firebug, чтобы увидеть если бы я мог что-то там придумать. Не повезло. Я не смог найти каких-либо конкретных различий в CSS, которые я мог бы специально связать с полем ввода, которое ведет себя иначе, чем обычный div.filler .

Помимо любопытства, я хотел бы знать, почему это должно доберитесь до конца, чтобы выяснить, как задать ширину один раз и забыть об этом. Моя текущая практика явной установки ширины как input , так и содержащего его блочного элемента кажется избыточной и менее модульной. Хотя я знаком с техникой обертывания входного элемента в div с последующим присвоением входному элементу отрицательных полей, это кажется весьма нежелательным.

borkweb и Phrogz предоставили исключительную информацию, которая использует границу . -box модель коробки из старых времен. Спасибо за это! Я хотел бы повторить фокус моего вопроса, который я намерен отделить от предложенного решения моей практической проблемы :

Что относительно спецификации заставляет поля ввода форматироваться в отличие от обычных блочных элементов, таких как div с? Решение с рамкой замечательное, но не

if($src = $img->getAttribute('src') AND strpos($src,$fgParams->get('base')) === false) { // prevents repeat processing
            EgivaUtility::profiling('Processing Image SRC: '.$src);
            // fix rel paths
            $src = EgivaUtility::encode_url(EgivaUtility::makeAbsUrl($origLink,$src));
            if($image_details = @getimagesize($src) AND !in_array($image_details[0],array(1,2)) AND !in_array($image_details[1],array(1,2))) {
                EgivaUtility::profiling('Image Details: '.print_r($image_details,true));
                $title = $img->getAttribute('title');
                $alt = $img->getAttribute('alt');
                if($fgParams->get('save_img')) { // consider restoring the JPath::clean()
                    // find image name and extension
                    $name = $title ? EgivaUtility::stringURLSafe($title) : EgivaUtility::stringURLSafe($alt);
                    preg_match('#[/?&]([^/?&]*)(\.jpg|\.jpeg|\.gif|\.png)#i',$src,$matches);
                    $ext = isset($matches[2]) ? strtolower($matches[2]) : '';
                    if(!$name) $name = isset($matches[1]) ? EgivaUtility::stringURLSafe($matches[1]) : md5($src);
                    unset($matches);
                    //create image file    
                    $filename = $fgParams->get('name_prefix').$name.$ext;
                    $filepath = $fgParams->get('savepath').'images'.DS.$filename;
                    if(!file_exists($filepath)) {
                        if($contents = EgivaUtility::getUrl($src,$fgParams->get('scrape_type'),'images',$filepath)) {
                            $saved = true;
                            //if(EgivaUtility::savefile($contents,$name,$update=false,$header=null,$fgParams->get('savepath').'images')) $saved = true;
                        }
                    } else {
                        $saved = true;
                    }
                    if($saved) $img->setAttribute('src', $fgParams->get('srcpath').'images/'.$filename);
                } else {
                    $img->setAttribute('src',$src);
                }
                EgivaUtility::profiling('Final Image SRC: '.$img->getAttribute('src'));
            //    $class = $img->getAttribute('class');
            //    $width = $img->getAttribute('width');
            //    $height = $img->getAttribute('height');
                if(strlen($alt) >= JString::strlen($content['title']) OR !$alt) {
                    $img->setAttribute('alt',$content['title']);
                }
                if($fgParams->get('rmv_img_style')) {
                    $img->removeAttribute('class');
                    $img->removeAttribute('style');
                    $img->removeAttribute('align');
                    $img->removeAttribute('border');
                    $img->removeAttribute('width');
                    $img->removeAttribute('height');
                }
                if($fgParams->get('img_class')) {
                    $img->setAttribute('class',$fgParams->get('img_class'));
                }
                $new_img = $dom2->importNode($imgs->item($k),true);
                $dom2->appendChild($new_img);
                $images[$k] = $dom2->saveHTML();
                $dom2->removeChild($new_img);

                // hack to avoid encoding problems
                $text = preg_replace($regex,'fg_img'.$k,$text,$limit=1);
                $replace[$k] = 'fg_img'.$k;
                $k++;
            } else {
                EgivaUtility::profiling('Image Rejected');
                $text = preg_replace($regex,'',$text,1);
            }
        }
    }