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




3 Answers

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

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

document.getElementById('fade').style.WebkitTransition = 'opacity 1s';
document.getElementById('fade').style.MozTransition = 'opacity 1s';
भाषाओं प्रेरित

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

#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';



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');

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




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}";

}



Related

javascript css3