javascript - atscript - जावास्क्रिप्ट का उपयोग कर CSS3 संक्रमण कैसे सेट करें?




स्क्रिप्टिंग भाषा (4)

मैं जावास्क्रिप्ट का उपयोग कर सीएसएस कैसे सेट कर सकता हूं (मुझे सीएसएस फ़ाइल तक पहुंच नहीं है)?

#fade div {
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  -ms-transition: opacity 1s;       
  transition: opacity 1s;
  opacity: 0;
  position: absolute;
  height: 500px;
  width: 960px;
}

उदाहरण के लिए:

document.getElementById('fade').HOW-TO-TYPE-webkit-transition = 'opacity 1s';

https://code.i-harness.com


आपको camelCase नोटेशन का उपयोग इस तरह करना चाहिए:

document.getElementById('fade').style.webkitTransition = 'opacity 1s';

एक से अधिक शब्द और हाइफ़न से अलग की गई प्रत्येक संपत्ति की तरह (उदाहरण के लिए सीएसएस background-position जेएस backgroundPosition में बदल जाती है।

शायद इस समय ब्राउजर विशिष्ट उपसर्गों से जुड़े गुणों में इस ब्राउजर को इस नोटेशन को अपनाया नहीं गया है, इसलिए कुछ ब्राउज़र जैसे फ़ायरफ़ॉक्स अभी भी Moz बजाय moz स्वीकार कर रहा है ( https://bugzilla.mozilla.org/show_bug.cgi?id=607381 )


आपको यहां देखना चाहिए: http://www.javascriptkit.com/javatutors/setcss3properties.shtml

जैसा कि आप सेटिंग सीएसएस गुणों को "-" के साथ देख सकते हैं, केवल अगले चरित्र में पूंजी होने के परिणामस्वरूप:

document.getElementById('fade').style.WebkitTransition = 'opacity 1s';
document.getElementById('fade').style.MozTransition = 'opacity 1s';

function reg(){

var style = document.head.appendChild(document.createElement("style"));

style.innerHTML = "#main:after {border-right:400px solid #fde561; left:0 ; transition : 0.5s all ease}";

}

var vendors = [
    '-webkit-',
    '-o-',
    '-moz-',
    '-ms-',
    ''
];

function toCamelCase(str) {
    return str.toLowerCase().replace(/(\-[a-z])/g, function($1) {
        return $1.toUpperCase().replace('-', '');
    });
}

function setCss3Style(el, prop, val) {
    vendors.forEach(function(vendor) {
        var property = toCamelCase(vendor + prop);

        if(p in el.style) {
            el.style[p] = val;
        }
    });
}

उपयोग:

setCss3Style(someElement, 'transition', 'opacity 1s');

यहां एक लाइव डेमो है






css3