как сделать так чтобы данная функция заменяла сокращенные слова на их полный вариант. jq

118

30 мая 2019, 14:20

например есть элемент со следующими классами:

<div class='font-size=50px margin-left=50px width=200px background-color=red'>hello world</div>

и есть следующая функция, которая получает свойства и значения из классов и применяет их на тот же элемент:

function getProp(classStr) { 
  return classStr.split('=')[0] 
} 
 
function getValues(classStr) { 
  var values = classStr.split('=')[1] 
  return values.split(',').join(' ') 
} 
 
function transform(el, prop, values) { 
  $(el).css(prop, values) 
} 
 
var elements = $('div') 
elements.each(function(i, el) { 
  var classList = $(el).attr('class') 
  if (!classList) return 
  var classProps = classList.split(' ') 
  $(classProps).each(function(i, str) { 
    var prop = getProp(str) 
    var values = getValues(str) 
    transform(el, prop, values) 
  }) 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<div class='font-size=50px margin-left=50px width=200px background-color=red'>hello world</div>

так вот... я хочу сделать так, чтобы можно было не писать полностью наименования свойств в классах, а заменить их на их сокращения, как: fs=50px ml=50px w=200px bg-color=red итд

как это возможно?

Answer 1

var slovar = { 
  "fs": "font-size", 
  "ml": "margin-left", 
  "bg-color": "background-color" 
}; 
 
function getFullName(shortName) { 
  return slovar[shortName] || shortName; 
} 
 
console.log(getFullName("ml"),getFullName("bg-color"),getFullName("fs"),getFullName("margin-top")); 
 
function transform(el, prop, values) { 
  $(el).css(getFullName(prop), values) 
}