Skip to content

Instantly share code, notes, and snippets.

@davidchc

davidchc/index.html

Created April 14, 2017 13:10
Show Gist options
  • Save davidchc/a771529692ca5b638ed5b5ae5e7622dc to your computer and use it in GitHub Desktop.
Save davidchc/a771529692ca5b638ed5b5ae5e7622dc to your computer and use it in GitHub Desktop.
Download ZIP
Exemplo de flexbox + incremento de fonte com js
Raw
index.html
<!doctype html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Exemplo de flexbox + incremento de fonte com js</title>
<style type="text/css">
.container{
display:flex;
min-height:200px;
}
.column{
-webkit-flex:1 1 auto;
flex:1 1 auto;
}
.column p{
padding:2px 10px;
margin:0;
font-size:14px;
}
.column-left{
border-right:1px solid #ccc;
background:#fff;
}
.column-right{
background:#ccc;
}
</style>
<script type="text/javascript">
function incrementFontSize(button, tags, fontsizeDefault, increment) {
var btn = document.querySelector(button);
btn.addEventListener('click', function(e){
e.preventDefault();
var listTags = document.querySelectorAll(tags);
var len = listTags.length;
for(var i = 0; i < len; i++) {
tag = listTags[i];
if(tag.style.fontSize == '') {
tag.style.fontSize = fontsizeDefault+'px';
}
tag.style.fontSize = (parseFloat(tag.style.fontSize) + increment) + 'px';
}
});
};
incrementFontSize("#btn-left", ".column-left p", 12, 2);
incrementFontSize("#btn-right", ".column-right p", 12, 2);
</script>
</head>
<body>
<button id="btn-left">+ Coluna Esquerda</button>
<button id="btn-right">+ Coluna Direita</button>
<br />
<br />
<div class="container">
<div class="column column-left">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="column column-right">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment