Larghezza monitor utente

**damy11** · 23-06-2011, 06:36

Ciao a tutti.

Ho una pagina html con il suo css incluso tramite link esterno cioè:
<link rel="stylesheet" href="layout.css">

All'interno di layout.css c'è l'id "container" che contiene un width in px.
Potrei ricavarmi con JS la larghezza del monitor dell'utente e utilizzare quel dato come larghezza di "container" nei fogli di stile?

Grazie per l'attenzione

**cavicchiandrea** · 23-06-2011, 09:25

Se intendi con js modificare il css no non puoi, devi modificare il div (o oggetto del documento) sempre tramite js.

**damy11** · 26-06-2011, 16:18

Ok,ti ringrazio per la risposta.

Quindi dovrei fare una cosa del genere:

Codice PHP:


<script>

var larghezza = window.screen.width;

</script>

<div id="container" width="larghezza">

</div>

Giusto?

**cavicchiandrea** · 26-06-2011, 16:25

codice:

<div id="container">
</div>
<script>
var larghezza = window.screen.width;
document.getElementById("container").style.width=larghezza+'px';
</script>

mi raccomando la cronologia prima il div poi lo script.

**carlomarx** · 26-06-2011, 16:52

Originariamente inviato da cavicchiandrea
Se intendi con js modificare il css no non puoi, devi modificare il div (o oggetto del documento) sempre tramite js.

Non affrettiamoci a dare delle risposte se non siamo assolutamente certi. Con javascript puoi modificare direttamente un foglio di stile, senza agire sul singolo elemento... come in quest'esempio, che potrebbe fare al caso tuo:

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio</title>
<script type="text/javascript">
function changeStyleSheet(sSelector, sProperty, sValue) {
	var bIsNewProp = true, aQueryList = [], rQuery = new RegExp(sSelector + "(?!\\w)");
	for (var iStyleSheetId = 0, nSelectorsLen = document.styleSheets.length; iStyleSheetId < nSelectorsLen; iStyleSheetId++) {
		if (document.styleSheets[iStyleSheetId].cssRules) { oRules = document.styleSheets[iStyleSheetId].cssRules; } 
		else if (document.styleSheets[0].rules) { oRules = document.styleSheets[0].rules; }
		else { return; }
		for (iThisRule in oRules) {
			if (rQuery.test(oRules[iThisRule].selectorText)) { aQueryList.push(oRules[iThisRule]); }
		}
	}
	var nQueryLen = aQueryList.length;
	if (nQueryLen === 0) { return; }
	for (var iQueryId = 0; iQueryId < nQueryLen; iQueryId++) {
		if (aQueryList[iQueryId].style[sProperty]) { aQueryList[iQueryId].style[sProperty] = sValue; bIsNewProp = false; break; }
	}
	if (bIsNewProp) { aQueryList[0].style[sProperty] = sValue; }
}
</script>
<style type="text/css">
#elementoACaso {
	text-decoration: underline;
	color: #ff00ff;
}
</style>
<style type="text/css">
.intLink {
	cursor: pointer;
	text-decoration: underline;
	color: #0000ff;
}

#container {
	width: 100px;
	height: 50px;
	background-color: #ff0000;
}
.intLink2 {
	cursor: pointer;
	text-decoration: underline;
	color: #0000ff;
}
</style>
</head>

<body>
						
<div id="container">Il tuo div</div>


<span class="intLink" onclick="changeStyleSheet('#container', 'width', '400px');">Clicca qui</span></p>
</body>
</html>

**carlomarx** · 26-06-2011, 17:50

P.S. La mia regular expression

codice:

new RegExp(sSelector + "(?!\\w)");

non è abbastanza affinata per non generare errori in casi particolari (non dovrebbe essere il tuo caso comunque). Se qualcun@ ha tempo e voglia può divertirsi a renderla impeccabile.

**cavicchiandrea** · 26-06-2011, 18:23

Originariamente inviato da carlomarx
Non affrettiamoci a dare delle risposte se non siamo assolutamente certi.

A parte il fatto che ne ero assolutamente convito (sbagliando) se si dovesse rispondere solo quando si hanno certezze, ci sarebbero molte domande ma poche risposte, oltretutto l'avevo intenso come modifica fisica, e in questo caso è una certezza

Con javascript puoi modificare direttamente un foglio di stile, senza agire sul singolo elemento... come in quest'esempio, che potrebbe fare al caso tuo:

Tanto per capire meglio in termini pratici il tuo script/esempio oltre ad avere 10 righe in più rispetto alla mia soluzione quali vantaggi ne deriva in questo contesto/problema?

**carlomarx** · 26-06-2011, 18:32

Originariamente inviato da cavicchiandrea
A parte il fatto che ne ero assolutamente convito (sbagliando) se si dovesse rispondere solo quando si hanno certezze, ci sarebbero molte domande ma poche risposte, oltretutto l'avevo intenso come modifica fisica, e in questo caso è una certezza Tanto per capire meglio in termini pratici il tuo script/esempio oltre ad avere 10 righe in più rispetto alla mia soluzione quali vantaggi ne deriva in questo contesto/problema?

Bisogna rispondere proponendo delle soluzioni, come tu hai ben fatto... non dicendo che altre soluzioni sono impossibili, almeno se non ne siamo certi. Chiunque abbia in mente delle soluzioni valide e ne abbia voglia ha la possibilità di rispondere. Se si tratta di assegnare una larghezza a un oggetto con id="container" anch'io propendo per la tua soluzione. Ma questo forum non serve solo a chi pone le domande (altrimenti ce la caveremmo benissimo con i messaggi privati), ma serve anche alle tante altre persone che cercano soluzioni simili (hai presente quando rispondiamo "fai una ricerca nel forum"?). Se qualcuno cerca davvero una soluzione per modificare un css e legge il tuo messaggio, semplicemente ottiene come risposta che non si può fare. Non te la devi prendere, era semplicemente doveroso correggere un'affermazione errata.

P.S. Sulle righe di codice... tendenzialmente più una soluzione dev'essere generale, più righe servono

Ma se a te va di ridurle...

**damy11** · 26-06-2011, 18:37

Grazie ad entrambi deciderò quale soluzione utilizzare

Discussione: Larghezza monitor utente

Strumenti discussione

Ricerca discussione

Visualizza

Larghezza monitor utente

Permessi di invio