HTML 내의 특정 요소의 색을 바꿀 수있는 자바 스크립트 라이브러리

Question

이 라이브러리 코드를 사용하면 HTML 파일 자체 내의 특정 SVG 파일의 크기, 투명도 및 회전을 변경할 수 있습니다.

이제 SVG의 색상을 변경할 수있는 가능성을 추가하고 싶습니다. 이 라이브러리에이 함수를 추가하는 방법에 대한 아이디어가 있습니까?

누구든지 나를 도울 수 있기를 바랍니다.

var Rotate = function() { 

/** 
* Default settings for the function 
* @type {{selector: string, choosedegrees: number, choosescale: number, chooseopacity: number}} 
*/ 
var defaultSettings = { 
    selector: '.library_arrow', 
    choosedegrees: 180, 
    choosescale: 1.1, 
    chooseopacity: 1.0 

}; 

var element = defaultSettings.selector; 
var choosedegrees = defaultSettings.choosedegrees; 
var choosescale = defaultSettings.choosescale; 
var chooseopacity = defaultSettings.chooseopacity; 


// Code that combines the default settings with the new settings 

var mergeObjects = function (object1, object2) { 
    for (var attrname in object1) { 
     if (object2.hasOwnProperty(attrname)) { 
      object1[attrname] = object2[attrname]; 
     } 
    } 
}; 

//Code that scales and turns the element 
var setDegrees = function (el, myDegrees, myScale) { 
    el.style.webkitTransform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
    el.style.mozTransform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
    el.style.msTransform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
    el.style.oTransform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
    el.style.transform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 

}; 

//Code that changes the transparancy of the element 
var setOpacity = function (el, myOpacity) { 
    el.style.opacity = myOpacity; 
}; 

// Code that initializes everything 
var init = function (selector, settings) { 

    mergeObjects(defaultSettings, settings || {}); 
    var selector = selector || defaultSettings.selector; 
    var element = document.querySelector(selector); 

    var settingdegrees = defaultSettings.choosedegrees; 
    var settingscale = defaultSettings.choosescale; 
    var settingopacity = defaultSettings.chooseopacity; 


    setDegrees(element, settingdegrees, settingscale); 
    setOpacity(element, settingopacity); 
}; 

// Return the code 
return { 
    init: init 
}; 

} 빠른 검색에서 볼 수 있듯이

Answer 1

이 작동합니다 :

var setColor = function (el, myColor){el.style.color = myColor;}

Answer 2

그냥 그런 다음, 회전 함수 내에서 함수를 작성 반환 코드에 대한 참조를 반환 , 최근에 액세스 할 수 있습니다 :

그래서 변경 색상은

0123입니다.

//Code that changes the color of the element 
var setColor = function(myRGBColor) { 
    var el = document.querySelector(element); 
    el.style.color = myRGBColor; 
}; 

그리고 반환 코드는 다음과 같습니다

// Return the code 
return { 
    init: init, 
    setColor:setColor 
}; 

코드 조각 아래 참조 :

var Rotate = function() { 
 

 
    /** 
 
    * Default settings for the function 
 
    * @type {{selector: string, choosedegrees: number, choosescale: number, chooseopacity: number}} 
 
    */ 
 
    var defaultSettings = { 
 
    selector: '.library_arrow', 
 
    choosedegrees: 180, 
 
    choosescale: 1.1, 
 
    chooseopacity: 1.0 
 

 
    }; 
 

 
    var element = defaultSettings.selector; 
 
    var choosedegrees = defaultSettings.choosedegrees; 
 
    var choosescale = defaultSettings.choosescale; 
 
    var chooseopacity = defaultSettings.chooseopacity; 
 

 

 
    // Code that combines the default settings with the new settings 
 

 
    var mergeObjects = function(object1, object2) { 
 
    for (var attrname in object1) { 
 
     if (object2.hasOwnProperty(attrname)) { 
 
     object1[attrname] = object2[attrname]; 
 
     } 
 
    } 
 
    }; 
 

 
    //Code that scales and turns the element 
 
    var setDegrees = function(el, myDegrees, myScale) { 
 
    el.style.webkitTransform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
 
    el.style.mozTransform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
 
    el.style.msTransform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
 
    el.style.oTransform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
 
    el.style.transform = 'rotate(' + myDegrees + 'deg) scale(' + myScale + ')'; 
 

 
    }; 
 

 
    //Code that changes the transparancy of the element 
 
    var setOpacity = function(el, myOpacity) { 
 
    el.style.opacity = myOpacity; 
 
    }; 
 
    
 
    //Code that changes the color of the element 
 
    var setColor = function(myRGBColor) { 
 
    var el = document.querySelector(element); 
 
    el.style.color = myRGBColor; 
 
    }; 
 
    
 
    // Code that initializes everything 
 
    var init = function(selector, settings) { 
 

 
    mergeObjects(defaultSettings, settings || {}); 
 
    var selector = selector || defaultSettings.selector; 
 
    var element = document.querySelector(selector); 
 

 
    var settingdegrees = defaultSettings.choosedegrees; 
 
    var settingscale = defaultSettings.choosescale; 
 
    var settingopacity = defaultSettings.chooseopacity; 
 

 

 
    setDegrees(element, settingdegrees, settingscale); 
 
    setOpacity(element, settingopacity); 
 
    }; 
 

 
    // Return the code 
 
    return { 
 
    init: init, 
 
    setColor:setColor 
 
    }; 
 

 
} 
 

 
var rotate = new Rotate(); 
 

 
var btn = document.getElementById("btn"); 
 

 
btn.addEventListener('click',function(e){ 
 
    rotate.init(); 
 
}); 
 

 
colorBtns = document.querySelectorAll(".btn-color"); 
 

 

 

 
for (var i = 0; i < colorBtns.length; i++) { 
 
    colorBtns[i].addEventListener('click', function(event) { if(this.dataset.color) 
 
     rotate.setColor(this.dataset.color); 
 
    }); 
 
}

.library_arrow { 
 
    width:200px; 
 
}

<div class="library_arrow">Text To BE rotated</div> 
 

 
<button id="btn">rotate</button> 
 
<br/> 
 
<button class="btn-color" data-color="#f00">Red</button> 
 
<button class="btn-color" data-color="#0f0">Green</button> 
 
<button class="btn-color" data-color="#00f">Blue</button> 
 
<button class="btn-color" data-color="#ff0">Yellow</button> 
 
<button class="btn-color" data-color="#0ff">Cyan</button>