javascript - Change "scale" attribute in CSS "transform" - Stack Overflow

admin管理员组

文章数量:1352314

I have the following div

<div style="transform-origin: left top 0px; transform: translate3d(0px, -26px, 0px) scale(1);">

As you can see, transform contains scale(1). What's the best way to change scale value?

Thank you for your help.

I have the following div

<div style="transform-origin: left top 0px; transform: translate3d(0px, -26px, 0px) scale(1);">

As you can see, transform contains scale(1). What's the best way to change scale value?

Thank you for your help.

• javascript
• css
• regex
• scale
• css-transforms

Share Improve this question Follow edited Feb 28, 2020 at 14:14 kmaork 6,02122 gold badges2626 silver badges4242 bronze badges asked May 3, 2016 at 6:04 Andi PavlloAndi Pavllo 2,50644 gold badges2020 silver badges3131 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

Sure, using javascript. There are many ways to do it, I'd do it using a regex.

function changeScale(newScale){
    var div = document.getElementById('theID');
    var curTrans = div.style.transform;
    var newScaleString = 'scale(' + newScale + ')';
    var regex = /scale\([0-9|\.]*\)/;
    var newTrans = curTrans.replace(regex, newScaleString);
    div.style.transform = newTrans;
}

Or with less lines:

function changeScale(newScale){
    var div = document.getElementById('theID');
    div.style.transform = div.style.transform.replace(/scale\([0-9|\.]*\)/, 'scale(' + newScale + ')');
}

You could use a regular expression (assumed you have your div DOM element in a variable 'el' and want to change scale to 2):

el.style.transform.replace(/scale\(\d+\)/, 'scale(2)');

本文标签： javascriptChange quotscalequot attribute in CSS quottransformquotStack Overflow